/* ============================================================================= TDS DESIGN SYSTEM Ported from the approved mockups. Do not edit colours here — edit the tokens. HOW COLOUR WORKS IN THIS PRODUCT -------------------------------- Everything below reads a custom property and never a literal. At runtime the API's /api/bootstrap response carries a generated token set for the signed-in tenant, and the client writes it into a :root block BEFORE first paint. A rebrand is therefore total and instantaneous — including the charts, which take their categorical palette from the same source. Three families, and the difference between them is deliberate: primary-* accent-* neutral-* GENERATED from the customer's three seed colours, in OKLCH, at eleven fixed lightness steps. Steps 600-950 are snapped until they pass 4.5:1 against white; steps 50-200 until they pass against ink. A customer cannot brand themselves into an unreadable interface. good warning serious RESERVED. Never seed-derived. A customer critical info (+ -tint) whose brand colour is red must not end up with red meaning "normal", and one whose brand is green must not have "on track" disappear into the chrome. cat-* Categorical chart colours. Fixed for the same reason: a legend has to stay distinguishable whatever the brand is. The values in :root below are FALLBACKS only — the product's own colours, used when the bootstrap response has not arrived (a cold offline start, or a developer running the client with no API). They are overwritten wholesale the moment it does. RTL --- Arabic is a launch language. There is not one physical direction in this file: every inline offset is `*-inline-start` / `*-inline-end`, so `dir="rtl"` on mirrors the entire interface with no second stylesheet. Adding a `margin-left` here would put a hole in that, and CI checks for it. ============================================================================= */ :root{ /* --- generated ramps: fallbacks, replaced at runtime ------------------- */ --primary-50:#EDF4FE; --primary-100:#D6E5FC; --primary-200:#B3CFF9; --primary-300:#84AEF3; --primary-400:#5189E8; --primary-500:#2A6ADB; --primary-600:#0B5FD0; --primary-700:#0A52B5; --primary-800:#0B3E8C; --primary-900:#0A2E68; --primary-950:#0A1E44; --accent-50:#FBFEE9; --accent-100:#F2FCCB; --accent-200:#E4F89B; --accent-300:#D6F45C; --accent-400:#C7F000; --accent-500:#B0D400; --accent-600:#9FCC00; --accent-700:#7C9F00; --accent-800:#5E7A00; --accent-900:#3E5400; --accent-950:#25340A; --neutral-50:#F7F9FC; --neutral-100:#EDF1F7; --neutral-200:#E3E8F0; --neutral-300:#D7DEE9; --neutral-400:#B4BFD0; --neutral-500:#93A0B5; --neutral-600:#6B7A94; --neutral-700:#52617A; --neutral-800:#3A4A66; --neutral-900:#22314D; --neutral-950:#0E1B33; /* --- surface and ink roles -------------------------------------------- */ --surface:#FFFFFF; --surface-2:var(--neutral-50); --surface-3:var(--neutral-100); --ink:var(--neutral-950); --ink-2:var(--neutral-800); --muted:var(--neutral-600); --faint:var(--neutral-500); --line:var(--neutral-200); --line-2:var(--neutral-100); --chrome:var(--primary-950); --chrome-2:var(--primary-900); /* --- reserved semantics ----------------------------------------------- */ --good:#088357; --good-tint:#E4F6EE; --good-ink:#0A5A3B; --warning:#A86200; --warning-tint:#FDF3E1; --warning-ink:#6E4200; --serious:#C2410C; --serious-tint:#FDEDE4; --serious-ink:#7A2908; --critical:#C62B41; --critical-tint:#FCEBEE; --critical-ink:#8A1E2D; --info:#0E6C99; --info-tint:#E4F2F8; --info-ink:#0A4A69; /* --- chrome accents ---------------------------------------------------- Fixed tones the INTERFACE uses - a violet icon well, a teal chip, the pill on an IDP in the week strip. Not series colours: nothing here identifies one thing against another, so these do not rebrand and do not need to. */ --cat-violet:#6E4FE0; --cat-violet-tint:#EFEBFD; --cat-violet-ink:#4A2FB0; --cat-teal:#0E9AA7; --cat-teal-tint:#E4F6F8; --cat-teal-ink:#0A5D66; /* --- the video studio -------------------------------------------------- The in and out marks, the saved passages, and the frame ruler. Chrome accents rather than reserved semantics: an in point is not "good" and an out point is not "critical", and borrowing those would make a coach's marks change meaning the first time somebody read the legend. They do not rebrand either - green-for-in and red-for-out is the convention every editing tool a coach has ever used already taught them. Read by video-trimmer.js as well as by the rules below: the frame ruler is drawn on a canvas, which has no stylesheet, so it asks for these by name through getComputedStyle. Renaming one silently greys out the ruler. */ --vt-in:#2FBF71; --vt-out:#E8554E; --vt-band:#6E4FE0; --vt-band-live:#C7F000; --vt-tick:rgba(140,160,190,.30); --vt-tick-major:rgba(140,160,190,.72); --vt-stage:#06101F; /* A coded moment from an analysis export, and the one the grid has just played. DISTINCT FROM --vt-band ON PURPOSE: a band is a passage a coach marked and can edit, a tick is a moment a file recorded and nobody can, and a timeline that drew them alike would stop saying which marks are the coach's. Blue rather than the brand's own accent for the same reason the in and out marks are not rebranded - these are chrome describing somebody else's data, not a statement about this tenant. Read by the canvas ruler in video-trimmer.js by name, as the ticks above are. */ --vt-marker:rgba(120,170,255,.85); --vt-marker-lit:#F2A73B; /* --- chart series ------------------------------------------------------ Step 9.2. GENERATED FROM THE BRAND and overwritten by the tenant's own block at runtime - see CategoricalPalette. The values here are the default brand's, produced by the same generator and held to the same five checks by CategoricalPaletteTests, so the fallback a customer never sees is not a palette nobody validated. EIGHT, IN A FIXED ORDER, NEVER CYCLED. A ninth series folds into "other". Slot 1 is the brand's own hue, so a single-series chart is drawn in the customer's colour. */ --cat-1:#2775E8; --cat-1-tint:#E8F1FF; --cat-1-ink:#0047A2; --cat-2:#A09523; --cat-2-tint:#F3F1DC; --cat-2-ink:#564F00; --cat-3:#B41C37; --cat-3-tint:#FFEBEA; --cat-3-ink:#930026; --cat-4:#C26EE9; --cat-4-tint:#F8EAFF; --cat-4-ink:#711593; --cat-5:#26A099; --cat-5-tint:#E0F5F3; --cat-5-ink:#005955; --cat-6:#DA7E24; --cat-6-tint:#FFECDE; --cat-6-ink:#743D00; --cat-7:#523CBB; --cat-7-tint:#EEEFFF; --cat-7-ink:#482EAD; --cat-8:#26A74F; --cat-8-tint:#E1F7E4; --cat-8-ink:#005E25; /* The ninth and beyond. Grey on purpose: "other" is not a series, and giving it a hue would make it look like one. */ --cat-other:#6B7280; --cat-other-tint:#F1F2F4; --cat-other-ink:#414750; /* --- the pitch ----------------------------------------------------------- Phase POS, step POS.1.3. RESERVED, like the semantic colours: never seed-derived, because a red-branded customer must not get a red pitch and a green one must not have its markers vanish into the grass. Navy, as in the position map the brief supplied. Only a marker's ring takes the brand (its accent), so a rebrand changes the markers and nothing else. */ --pitch-surface:#132B52; --pitch-line:rgba(255,255,255,.55); --pitch-marker:#FFFFFF; --pitch-marker-ink:#0E1B33; --pitch-ink:#FFFFFF; /* --- the body outline ---------------------------------------------------- Phase INJ, step INJ.1.3. RESERVED, like the pitch: never seed-derived, so no brand can make an injured part disappear into the figure. The injured marker is the reserved serious colour, not a brand hue. */ --body-fill:#E3E8F0; --body-line:#93A0B5; --body-marker:#FFFFFF; --body-marker-ring:#1F3A66; --body-injured:var(--serious); --body-ink:#3A4A66; /* --- injury body-map heat ramp ------------------------------------------- Phase INJ, step INJ.6.3. RESERVED and sequential: the body map shades each part by how many injuries it carries, light (few) to dark (many). Never seed-derived (AC INJ.6.3.6), so a rebrand cannot make a busy part read as a quiet one; and every part also shows its number, so the ramp is never the only encoding (AC INJ.6.3.3). One hue, six steps, step 0 being "none". */ --injury-heat-0:#EEF2F7; --injury-heat-1:#CFE2F2; --injury-heat-2:#94C4E4; --injury-heat-3:#4E97CE; --injury-heat-4:#2266A8; --injury-heat-5:#123F73; /* --- shape, shadow, type ----------------------------------------------- */ --radius:12px; --r-sm:8px; --r:var(--radius); --r-lg:16px; --sh-1:0 1px 2px rgba(14,27,51,.06), 0 1px 3px rgba(14,27,51,.04); --sh-2:0 2px 4px rgba(14,27,51,.05), 0 8px 20px rgba(14,27,51,.06); --sh-3:0 12px 32px rgba(10,30,68,.14); --font-display:"Archivo"; --font-body:"Public Sans"; --type-scale:1; --font:var(--font-body),"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; /* --- touch -------------------------------------------------------------- 44px is the floor for anything a coach taps. The register is used one-handed, in the rain, in gloves, while watching a pitch — §4. Nothing interactive in this file goes below it, and the mobile overrides at the end enforce it. */ --tap:44px; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:var(--font); background:var(--surface-2); color:var(--ink); font-size:calc(14px * var(--type-scale)); line-height:1.5; -webkit-font-smoothing:antialiased; } button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} a{color:inherit;text-decoration:none} svg{display:block} /* The app fills the viewport in the product. In the mockups it sat inside a presentation frame, which is why the border and radius are gone. */ .app{background:var(--surface-2);min-height:100vh;min-height:100dvh} /* Focus is visible and it is not negotiable. The mockups had no keyboard state because nobody tabbed through a picture. */ :focus-visible{outline:2px solid var(--primary-600);outline-offset:2px;border-radius:4px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} } button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} a{color:inherit;text-decoration:none} svg{display:block} /* The presentation frame the mockups sat in - a sticky bar, a rounded card and a drop shadow around the whole app - is DELIBERATELY not ported. It belonged to the HTML deck, not to the product, and its .app override carried overflow:hidden onto a full-page container: everything below the first screenful was clipped and the page could not scroll at all. The product's own .app rule is above. */ /* ============ TOP BAR ============ */ .topbar{ background:linear-gradient(100deg,var(--primary-950) 0%,var(--primary-900) 100%); color:#fff;display:flex;align-items:center;gap:18px;padding:0 20px;height:60px; } .tb-menu{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--primary-200)} .tb-menu:hover{background:rgba(255,255,255,.09);color:#fff} .tb-title{font-size:15.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap} .tb-ma{display:flex;align-items:center;gap:9px;padding:5px 11px 5px 6px;border-radius:99px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13)} .tb-ma .flag{width:26px;height:17px;border-radius:3px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.25)} .tb-ma b{font-size:12.5px;font-weight:600} /* The team logo, scaled to fit the pill whatever shape it was uploaded in: a tall crest and a wide wordmark both sit inside the same height. */ .tb-ma .tb-logo{display:block;flex:none;block-size:24px;inline-size:auto;max-inline-size:96px;object-fit:contain} .tb-ma .chev{color:var(--primary-300)} .tb-search{ margin-inline-start:auto;display:flex;align-items:center;gap:9px; background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14); border-radius:9px;padding:0 12px;height:36px;width:270px;color:var(--primary-300); } .tb-search input{background:none;border:none;outline:none;color:#fff;font:inherit;font-size:13px;width:100%} .tb-search input::placeholder{color:var(--primary-300)} /* The results panel. Anchored to the box, above everything, and constrained so a long list scrolls inside itself rather than pushing the page around. */ .tb-search{position:relative} .sr{ position:absolute;inset-block-start:calc(100% + 6px);inset-inline-start:0; inline-size:min(420px, 92vw);max-block-size:60vh;overflow-y:auto; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--sh-2);padding:6px;z-index:60;color:var(--ink) } .sr-group h4{ font-size:10.5px;text-transform:uppercase;letter-spacing:.06em; color:var(--muted);padding:8px 10px 4px } .sr-hit{ display:block;inline-size:100%;text-align:start; padding:8px 10px;border-radius:7px;background:none;border:none; font:inherit;color:var(--ink);cursor:pointer; /* 48px tap target: two lines of 8px padding plus the text meets it, and the min-block-size guarantees it when there is no subtitle. AGENTS.md. */ min-block-size:48px } .sr-hit:hover,.sr-hit:focus-visible{background:var(--primary-50)} .sr-hit b{display:block;font-size:13px;font-weight:650} .sr-hit small{display:block;font-size:11.5px;color:var(--muted);margin-block-start:1px} .sr-note{padding:12px 10px;font-size:12.5px;color:var(--muted)} .tb-search kbd{font:inherit;font-size:10.5px;background:rgba(255,255,255,.14);padding:2px 6px;border-radius:4px;color:var(--primary-200)} .tb-ico{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--primary-200);position:relative} .tb-ico:hover{background:rgba(255,255,255,.09);color:#fff} .tb-ico .badge{position:absolute;top:6px;inset-inline-end:6px;min-width:15px;height:15px;border-radius:99px;background:var(--accent-400);color:var(--accent-950);font-size:9.5px;font-weight:800;display:grid;place-items:center;padding:0 4px;border:2px solid var(--primary-950)} .tb-user{display:flex;align-items:center;gap:10px;padding-inline-start:14px;margin-inline-start:4px;border-inline-start:1px solid rgba(255,255,255,.15)} .tb-user .who{line-height:1.25;text-align:end} .tb-user .who b{display:block;font-size:12.5px;font-weight:600} .tb-user .who small{color:var(--primary-300);font-size:11px} .avatar{border-radius:50%;background:linear-gradient(140deg,var(--primary-500),var(--primary-800));color:#fff;display:grid;place-items:center;font-weight:700;flex:none;letter-spacing:.02em} .avatar.sm{width:26px;height:26px;font-size:10.5px} .avatar.md{width:34px;height:34px;font-size:12px} .avatar.lg{width:52px;height:52px;font-size:17px} .avatar.xl{width:64px;height:64px;font-size:21px} /* ============ LAYOUT ============ */ .shell{display:grid;grid-template-columns:224px 1fr;min-height:940px} /* ============ SIDEBAR ============ */ .side{background:var(--primary-600);color:#fff;padding:18px 0 22px;display:flex;flex-direction:column} .side-brand{display:flex;align-items:center;justify-content:space-between;padding:0 18px 20px} .fifa-mark{font-weight:900;font-size:23px;letter-spacing:-.055em;font-style:italic} .side-close{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:12px;color:var(--neutral-100)} .side-sec{padding:0 12px;margin-bottom:4px} .side-cap{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--primary-300);font-weight:700;padding:14px 8px 7px} .nav-i{ display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px; font-size:13.5px;font-weight:500;color:var(--neutral-100);margin-bottom:1px;transition:.13s; } .nav-i:hover{background:rgba(255,255,255,.12)} .nav-i .ico{width:17px;flex:none;opacity:.85} .nav-i .chev{margin-inline-start:auto;opacity:.6} .nav-i.active{background:var(--accent-400);color:var(--accent-950);font-weight:700} .nav-i.active .ico{opacity:1} .nav-i.open{background:rgba(255,255,255,.13);font-weight:600;color:#fff} .nav-sub{padding-inline-start:10px;margin:2px 0 6px;border-inline-start:2px solid rgba(255,255,255,.2);margin-inline-start:18px} .nav-sub .nav-i{font-size:12.5px;padding:7px 10px;color:var(--primary-200)} .nav-sub .nav-i.active{background:var(--accent-400);color:var(--accent-950)} .side-foot{margin-top:auto;padding:0 12px} .side-foot .nav-i{color:var(--primary-200);font-size:12.5px} .side-sync{margin:14px 12px 0;padding:10px 11px;border-radius:10px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.13)} .side-sync .row{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--neutral-50)} .side-sync small{display:block;color:var(--primary-300);font-size:10.5px;margin-top:2px} .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent-400);box-shadow:0 0 0 3px rgba(199,240,0,.22);flex:none} /* ============ MAIN ============ */ .main{padding:22px 26px 34px;min-inline-size:0} .crumbs{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-bottom:12px} .crumbs b{color:var(--ink-2);font-weight:600} .page-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:20px} .page-head h1{font-size:25px;font-weight:750;letter-spacing:-.025em;line-height:1.2} .page-head p{color:var(--muted);font-size:13.5px;margin-top:4px} .head-actions{margin-inline-start:auto;display:flex;align-items:center;gap:9px} .btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:9px;font-size:13px;font-weight:600;transition:.14s;white-space:nowrap} .btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink-2);box-shadow:var(--sh-1)} .btn-ghost:hover{border-color:var(--primary-200);color:var(--ink)} .btn-primary{background:var(--primary-600);color:#fff;box-shadow:0 2px 8px rgba(11,95,208,.28)} .btn-primary:hover{background:var(--primary-700)} .btn-accent{background:var(--accent-400);color:var(--accent-950);box-shadow:0 2px 8px rgba(160,196,0,.35)} .btn-accent:hover{filter:brightness(.96)} .btn-sm{height:30px;padding:0 11px;font-size:12px;border-radius:8px} /* ============ KPI STRIP ============ */ .kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px} .kpi{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:13px 14px;box-shadow:var(--sh-1);position:relative;overflow:hidden; } .kpi::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--primary-600)} .kpi.k-lime::before{background:var(--accent-400)} .kpi.k-green::before{background:var(--good)} .kpi.k-amber::before{background:var(--warning)} .kpi.k-violet::before{background:var(--cat-violet)} .kpi.k-teal::before{background:var(--cat-teal)} .kpi .lab{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.02em;display:flex;align-items:center;gap:5px} .kpi .val{font-size:24px;font-weight:750;letter-spacing:-.03em;margin-top:5px;line-height:1;font-variant-numeric:tabular-nums} .kpi .val small{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0} .kpi .sub{font-size:11px;margin-top:6px;display:flex;align-items:center;gap:4px;color:var(--muted)} /* Step 9.1: a tile with records behind it is a real button. Left-aligned and full-width, because a button element otherwise centres its content and shrinks to fit, and the row would stop lining up with the tiles that are not drillable. Everything else about it is the tile. */ .kpi-drill{ display:block;width:100%;text-align:start;font:inherit;color:inherit;cursor:pointer; appearance:none; } .kpi-drill .lab,.kpi-drill .val,.kpi-drill .sub{display:flex} .kpi-drill:hover{border-color:var(--primary-300);box-shadow:var(--sh-2)} .kpi-drill:focus-visible{outline:2px solid var(--primary-600);outline-offset:2px} .kpi-why{ position:absolute;inset-block-start:11px;inset-inline-end:11px;font-size:10px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--primary-600);opacity:0;transition:opacity .12s; } .kpi-drill:hover .kpi-why,.kpi-drill:focus-visible .kpi-why{opacity:1} /* ============ DRILL-THROUGH ============ */ .drill-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px} .drill-lab{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--muted)} .drill-val{font-size:30px;font-weight:750;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums} .drill-h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 7px} .drill-inputs td:first-child{font-weight:600} .drill-rows{max-width:100%} /* The untranslated statement. Monospaced and quiet: it is evidence rather than prose, and the eye should be able to skip it until it is needed. */ .drill-statement{ margin-top:16px;padding:9px 11px;background:var(--surface-2);border:1px solid var(--line-2); border-radius:var(--r);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px; color:var(--ink-2);line-height:1.5; } .drill-hash{margin-top:5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px} .up{color:var(--good);font-weight:700} .down{color:var(--critical);font-weight:700} /* ============ GRID ============ */ .cols{display:grid;grid-template-columns:1.32fr 1fr;gap:16px;align-items:start} .stack{display:flex;flex-direction:column;gap:16px} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden} .card-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-2)} .card-h h2{font-size:14.5px;font-weight:700;letter-spacing:-.01em} .card-h p{font-size:12px;color:var(--muted);margin-top:1px} .card-h .right{margin-inline-start:auto;display:flex;align-items:center;gap:8px} .card-b{padding:16px} .card-b.tight{padding:12px 16px 16px} .card-f{padding:11px 16px;border-top:1px solid var(--line-2);background:var(--surface-2);display:flex;align-items:center;gap:10px} .hicon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--primary-50);color:var(--primary-600)} .hicon.lime{background:var(--accent-100);color:var(--accent-800)} .hicon.violet{background:var(--cat-violet-tint);color:var(--cat-violet)} .hicon.amber{background:var(--warning-tint);color:var(--warning)} .hicon.teal{background:var(--cat-teal-tint);color:var(--cat-teal)} .link{font-size:12.5px;font-weight:600;color:var(--primary-600);display:inline-flex;align-items:center;gap:4px} .link:hover{text-decoration:underline} /* ============ COHORT MATRIX ============ */ .cohort-head{display:grid;grid-template-columns:64px 1fr 1fr;gap:10px;padding:0 0 8px;align-items:center} .cohort-head .ch{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px} .cohort-row{display:grid;grid-template-columns:64px 1fr 1fr;gap:10px;margin-bottom:8px;align-items:stretch} .cohort-yr{ display:flex;flex-direction:column;align-items:center;justify-content:center; background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px; } .cohort-yr b{font-size:14px;font-weight:750;letter-spacing:-.02em} .cohort-yr small{font-size:9.5px;color:var(--faint);font-weight:600;letter-spacing:.04em} .sq{ display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px; border:1px solid var(--line);background:var(--surface);transition:.14s;cursor:pointer; } .sq:hover{border-color:var(--primary-600);box-shadow:0 0 0 3px var(--primary-50);transform:translateY(-1px)} .sq .st{width:9px;height:9px;border-radius:50%;flex:none} .st-active{background:var(--good);box-shadow:0 0 0 3px var(--good-tint)} .st-prep{background:var(--warning);box-shadow:0 0 0 3px var(--warning-tint)} .st-ynt{background:var(--critical);box-shadow:0 0 0 3px var(--critical-tint)} .sq .info{min-width:0;flex:1} .sq .info b{display:block;font-size:12.5px;font-weight:650;letter-spacing:-.01em} .sq .info small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sq .cnt{font-size:11px;font-weight:700;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line-2);border-radius:7px;padding:3px 7px;flex:none} .sq.empty{background:repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 6px,var(--surface-3) 6px,var(--surface-3) 12px);border-style:dashed;cursor:default;color:var(--faint);justify-content:center;font-size:11.5px;font-weight:600} .sq.empty:hover{border-color:var(--line);box-shadow:none;transform:none} /* THE COHORT MATRIX ON A PHONE. AC 2.3.2. Two 1fr columns beside a 64px label needs about 520px before the tiles stop being readable; at 375 the second column was clipped mid-word by the card, which reads as broken rather than as scrollable. The grid becomes a list: the year on its own line, then the squads under it full width. The alignment that makes the desktop grid worth having - the gap where a cohort has no squad - is what the "No squad this cohort" tile carries, and it is kept rather than hidden, because the gap IS the information. */ @media (max-width:600px){ .cohort-head{display:none} .cohort-row{ grid-template-columns:1fr;gap:6px;margin-bottom:14px } .cohort-yr{ flex-direction:row;justify-content:flex-start;gap:8px; padding:6px 11px;background:none;border:none } .cohort-yr b{font-size:13px} .cohort-yr small{font-size:10.5px} /* A tap target that is a whole row, not a 9px dot inside one. */ .sq{min-block-size:48px} .sq.empty{min-block-size:40px;font-size:11px} } .legend{display:flex;flex-wrap:wrap;gap:14px;font-size:11.5px;color:var(--muted);padding-top:4px} .legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:5px;vertical-align:1px} /* ============ ATTENTION LIST ============ */ /* WRAPS. Four things in one row - pin, name, due chip, button - fit in a wide card and do not fit in a narrow aside, where the nowrap chip refused to shrink and sat on top of the name. Wrapping puts the chip and the button on a second line instead of truncating somebody's name to make room. */ .att{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:11px 16px;border-bottom:1px solid var(--line-2);transition:.13s} .att:last-child{border-bottom:none} .att:hover{background:var(--surface-2)} /* Set an attention item aside. Quiet until hovered: it is the least important thing on the row, and the action button beside it is the one to press. */ .att-x{inline-size:32px;block-size:32px;border-radius:8px;display:grid;place-items:center;flex:none;color:var(--faint);background:none;border:none;cursor:pointer} .att-x:hover,.att-x:focus-visible{background:var(--surface-2);color:var(--ink)} .sr-row{display:flex;align-items:center;gap:4px} .sr-row .sr-hit{flex:1;min-inline-size:0} .sr-foot{display:block;inline-size:100%;margin-block-start:4px;padding:10px;border:none;border-block-start:1px solid var(--line-2);background:none;color:var(--primary-600);font:inherit;font-size:12.5px;font-weight:650;text-align:center;cursor:pointer;min-block-size:var(--tap)} .sr-foot:hover,.sr-foot:focus-visible{background:var(--primary-50)} /* The attention settings table: rules down, roles across. */ .rule-grid{inline-size:100%;border-collapse:collapse;font-size:12.5px} .rule-grid th,.rule-grid td{padding:8px 10px;border-bottom:1px solid var(--line-2);text-align:center;vertical-align:middle} .rule-grid th:first-child,.rule-grid td:first-child{text-align:start;min-inline-size:220px} /* The rule's name stays in view while ten role columns scroll past it. */ .rule-grid tr > :first-child{position:sticky;inset-inline-start:0;background:var(--surface);z-index:1} .rule-grid thead th{font-size:11px;font-weight:650;color:var(--muted);white-space:nowrap} .rule-grid td small{display:block;color:var(--muted);font-size:11.5px;margin-block-start:2px} .rule-grid input[type=checkbox]{inline-size:18px;block-size:18px;cursor:pointer} .rule-grid .is-default{color:var(--faint)} /* Positioned, so a visually-hidden heading inside (position:absolute) is clipped by this box. Unpositioned, it escaped to the page and, right to left, widened the whole page at phone width. Step ACH.1.3. */ .table-scroll{overflow-x:auto;position:relative} /* Step PP.1.1. The performance areas: one per row, in rating-grid order. */ .area-grid td{white-space:nowrap} .area-grid th .chip{margin-inline-start:6px} .area-grid tr.is-retired th b{color:var(--muted)} .area-add{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-block-start:14px} .area-add .f{flex:1;min-inline-size:200px} /* Phase ACH, step ACH.2.3. A child's achievement history, and the match sheet's children - one tap each, so each is at least a thumb high. */ .achievement-list{list-style:none;margin:0;padding:0} .achievement-list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-block:8px;border-block-end:1px solid var(--line)} .achievement-list li small{flex-basis:100%} .achievement-list li.is-voided{color:var(--muted)} .achievement-players{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-block-start:12px} .achievement-players .btn{min-block-size:var(--tap);justify-content:flex-start} .att .pin{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;font-size:15px} .att .txt{min-width:0;flex:1 1 130px} .att .txt b{display:block;font-size:12.8px;font-weight:650;letter-spacing:-.005em} .att .txt small{display:block;color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* The button goes last on the wrapped line rather than floating mid-row. */ .att > .btn{margin-inline-start:auto} .chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:99px;letter-spacing:.02em;white-space:nowrap} .c-red{background:var(--critical-tint);color:var(--critical)} .c-amber{background:var(--warning-tint);color:var(--warning)} .c-green{background:var(--good-tint);color:var(--good)} .c-blue{background:var(--primary-50);color:var(--primary-700)} .c-violet{background:var(--cat-violet-tint);color:var(--cat-violet)} .c-teal{background:var(--cat-teal-tint);color:var(--cat-teal)} .c-grey{background:var(--line-2);color:var(--primary-600)} .c-lime{background:var(--accent-100);color:var(--accent-700)} /* ============ CALENDAR ============ */ .cal-toolbar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line-2);flex-wrap:wrap} .cal-nav{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)} .cal-nav button{width:28px;height:28px;display:grid;place-items:center;color:var(--muted)} .cal-nav button:hover{background:var(--surface-2);color:var(--ink)} .cal-nav .today{width:auto;padding:0 11px;font-size:12px;font-weight:600;border-inline-start:1px solid var(--line);border-inline-end:1px solid var(--line);color:var(--ink-2)} .cal-range{font-size:13px;font-weight:650;letter-spacing:-.01em} .seg{display:flex;background:var(--line-2);border-radius:8px;padding:3px;gap:2px;margin-inline-start:auto} .seg button{padding:4px 10px;border-radius:6px;font-size:11.5px;font-weight:600;color:var(--muted)} .seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)} .filters{display:flex;gap:6px;padding:9px 16px;flex-wrap:wrap;border-bottom:1px solid var(--line-2);align-items:center} .fchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2)} .fchip i{width:8px;height:8px;border-radius:2px;display:inline-block} .fchip.off{opacity:.45;text-decoration:line-through} .cal{display:grid;grid-template-columns:44px repeat(7,1fr);font-size:11px} .cal .hcell{padding:7px 4px;text-align:center;border-bottom:1px solid var(--line);border-inline-start:1px solid var(--line-2)} .cal .hcell:first-child{border-inline-start:none} .cal .hcell small{display:block;color:var(--faint);font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase} .cal .hcell b{font-size:14px;font-weight:650;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;margin-top:2px} .cal .hcell.today b{background:var(--primary-600);color:#fff} .cal .hcell.today small{color:var(--primary-600)} .cal .tcell{border-top:1px solid var(--line-2);text-align:end;padding:2px 6px 0;color:var(--faint);font-size:9.5px;font-weight:600;height:44px} .cal .gcell{ border-top:1px solid var(--line-2);border-inline-start:1px solid var(--line-2);position:relative; background-image:repeating-linear-gradient(to bottom,var(--line-2) 0 1px,transparent 1px 46px); } .cal .gcell.sat,.cal .gcell.sun{background-color:var(--surface-2)} .cal .body{grid-column:1/-1;display:grid;grid-template-columns:44px repeat(7,1fr);grid-template-rows:repeat(10,46px);position:relative} /* The row count above is a FALLBACK. TdsWeekCalendar sets it inline from the hours it was given; a page showing an evening programme needs more than ten. */ .ev{ margin:2px 3px;border-radius:7px;padding:5px 7px;font-size:10.5px;line-height:1.3; overflow:hidden;position:relative;cursor:pointer;transition:.13s; border-inline-start:3px solid; } .ev:hover{filter:brightness(.985);box-shadow:var(--sh-2);z-index:5} .ev b{display:block;font-weight:700;font-size:11px;letter-spacing:-.01em} .ev small{display:block;opacity:.82;font-size:9.5px;margin-top:1px} /* The calendar's events as buttons: no browser chrome, the kind's own colours and inline-start stripe, and a focus ring a keyboard user can follow. */ button.ev,button.mev{font:inherit;text-align:start;border-block:0;border-inline-end:0;cursor:pointer} button.ev{display:block} button.mev{inline-size:100%} button.agenda-row{inline-size:100%;font:inherit;text-align:start;background:none;border-block-start:0;border-inline-end:0;cursor:pointer} button.ev:focus-visible,button.mev:focus-visible{outline:2px solid var(--primary-600);outline-offset:1px;z-index:6} /* Step 4.1: a cancelled activity is still drawn - faded, its title struck through, and its detail line saying "Cancelled" in words (never by strike-through alone). */ .ev.is-cancelled,.mev.is-cancelled,.agenda-row.is-cancelled{opacity:.62;border-style:dashed} .is-cancelled .ev-title{text-decoration:line-through} /* Step 4.2: the author's own draft - dashed, and "Draft" in words. */ .ev.is-draft,.mev.is-draft,.agenda-row.is-draft{border-style:dashed} /* Step AS.2.2. A row of buttons under a form in a card, and a programme's block of seasons. */ .form-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-block:10px 4px} .prog-block{border-block-start:1px solid var(--line-2);margin-block-start:14px;padding-block-start:12px} .prog-h{font-size:13px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px} /* An empty hour on the week grid, as a place to add a session: invisible until pointed at or focused, then a tinted cell with a plus. Under the events, so an event is still what a click on it opens. */ .cal-add{font:inherit;background:none;border:0;padding:0;cursor:pointer;color:var(--primary-600); display:grid;place-items:center;opacity:0;font-size:16px;font-weight:700;border-radius:6px;margin:2px 3px} .cal-add:hover,.cal-add:focus-visible{opacity:1;background:var(--primary-50)} .cal-add:focus-visible{outline:2px solid var(--primary-600);outline-offset:-2px} /* The same on a month day: a small plus beside the date. */ .mday-add{position:absolute;inset-block-start:5px;inset-inline-end:5px;inline-size:21px;block-size:21px; display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;opacity:0} .mday:hover .mday-add,.mday-add:focus-visible{opacity:1} .mday-add:hover,.mday-add:focus-visible{background:var(--primary-50);color:var(--primary-600)} @media (hover:none){.mday-add{opacity:1}} /* The event details panel. */ .evd{display:grid;gap:14px;min-inline-size:0} /* A little wider than a form dialog: two columns of label and value. */ .dlg:has(.evd){inline-size:min(620px, 92vw)} .evd dd{overflow-wrap:anywhere} .evd-chips{display:flex;gap:6px;flex-wrap:wrap} .evd h3{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 6px} .evd dl{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:6px 14px;margin:0;font-size:13px} .evd dt{color:var(--muted)} .evd dd{margin:0;color:var(--ink);white-space:pre-line} .evd-files{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:13px} .evd-files li{display:flex;gap:8px;align-items:center} .evd-note{font-size:12px;color:var(--muted);margin:0} /* The session write-up. Step SR.1. `white-space:pre-line`, because a coach writing three short paragraphs on a phone expects three paragraphs back rather than one run-on. Same treatment the dd above already gets, for the same reason. */ .evd-report{font-size:13px;color:var(--ink);margin:0 0 6px;white-space:pre-line;overflow-wrap:anywhere} .evd-report-actions{display:flex;gap:8px;flex-wrap:wrap;margin-block-start:8px} /* Authored text beside a machine's restatement of it. Phase TR, step TR.3.1. THE ORIGINAL IS NOT DIMMED. The obvious styling - full weight on the translation the reader can actually read, the original greyed out beneath - would say with typography the opposite of what this whole phase says in words: that the machine's version is the record and the coach's is a footnote. Both paragraphs get the same ink and the same size, and the MARK between them is what carries the difference. Logical properties throughout, so the border and the indent move to the other side under dir="rtl" without a second rule (AGENTS.md section 2). The blocks carry their OWN dir, because a Portuguese note read in Arabic puts one direction directly above the other. */ .tr{display:grid;gap:6px} .tr-src{font-size:11px;color:var(--muted);margin:0;text-transform:none} .tr-orig{font-size:13px;color:var(--ink);margin:0;white-space:pre-line;overflow-wrap:anywhere} /* The mark. Not colour alone: a glyph and a sentence, either of which survives a monochrome print, a forced-colours mode, or a reader who cannot tell the tint from the surface. AC TR.3.1.2. */ .tr-mark{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted); margin-block-start:4px;padding-block-start:6px;border-block-start:1px dashed var(--line)} .tr-icon{font-size:12px;line-height:1} .tr-what{overflow-wrap:anywhere} /* Indented against a border on the reading-start side, so the machine's words are visibly a quotation of the record rather than a continuation of it. */ .tr-text{font-size:13px;color:var(--ink);margin:0;white-space:pre-line;overflow-wrap:anywhere; padding-inline-start:10px;border-inline-start:2px solid var(--line)} /* .ev-training and .ev-talentId, NOT .ev-train and .ev-tid. CalendarViewModel emits the long names - its own comment says these are the design tokens - and nothing in the product has ever emitted the short ones, so training sessions and Talent ID activities have been drawing as unstyled boxes on every calendar since the view model was written. Two of the four kinds, in the two colours a coach uses most. The short names are kept as aliases: they cost a line each and removing them is a separate question from making the calendar right. */ .ev-training,.ev-train{background:var(--primary-50);border-color:var(--primary-600);color:var(--primary-800)} .ev-match{background:var(--accent-100);border-color:var(--accent-600);color:var(--accent-900)} .ev-talentId,.ev-tid{background:var(--warning-tint);border-color:var(--warning);color:var(--warning)} .ev-idp{background:var(--cat-violet-tint);border-color:var(--cat-violet);color:var(--cat-violet-ink)} .ev-other{background:var(--line-2);border-color:var(--primary-400);color:var(--primary-700)} /* ============ RESOURCE TILES ============ */ .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px} .tiles.col1{grid-template-columns:1fr} .tile{ display:flex;gap:11px;padding:13px;border-radius:11px;border:1px solid var(--line); background:var(--surface);transition:.15s;cursor:pointer;align-items:flex-start; } .tile:hover{border-color:var(--primary-600);box-shadow:0 0 0 3px var(--primary-50);transform:translateY(-1px)} .tile .ti{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none} .tile b{display:block;font-size:12.8px;font-weight:650;letter-spacing:-.01em} .tile small{display:block;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4} .tile .meta{font-size:10px;color:var(--faint);margin-top:5px;font-weight:600} /* ============ ACTIVITY FEED ============ */ .feed{position:relative;padding-inline-start:6px} .feed-i{display:flex;gap:11px;padding:9px 0;position:relative} .feed-i:not(:last-child)::before{content:"";position:absolute;inset-inline-start:12px;top:30px;bottom:-2px;width:2px;background:var(--line-2)} .feed-i .fd{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;z-index:1;border:2px solid var(--surface)} .feed-i p{font-size:12px;line-height:1.45;color:var(--ink-2)} .feed-i p b{font-weight:650;color:var(--ink)} .feed-i .feed-a{color:inherit;text-decoration:none;display:block} .feed-i .feed-a:hover p,.feed-i .feed-a:focus-visible p{text-decoration:underline} .feed-i time{font-size:10.5px;color:var(--faint);font-weight:600;display:block;margin-top:2px} /* ============ SCREEN 2 : TEAM HEADER ============ */ .team-hero{ background:linear-gradient(102deg,var(--primary-600) 0%,var(--primary-800) 58%,var(--primary-900) 100%); border-radius:var(--r-lg);padding:20px 22px;color:#fff;position:relative;overflow:hidden; box-shadow:0 8px 24px rgba(8,51,122,.22);margin-bottom:16px; } .team-hero::after{ content:"";position:absolute;inset-inline-end:-70px;top:-90px;width:300px;height:300px;border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(199,240,0,.20),rgba(199,240,0,0) 62%); } .th-top{display:flex;align-items:center;gap:16px;position:relative;z-index:1;flex-wrap:wrap} .crest{ width:58px;height:58px;border-radius:15px;flex:none;display:grid;place-items:center; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(4px); } .crest .flag{width:34px;height:22px;border-radius:3px;overflow:hidden} .th-name h1{font-size:24px;font-weight:750;letter-spacing:-.028em;line-height:1.15} .th-chips{display:flex;gap:7px;margin-top:7px;flex-wrap:wrap} .hchip{font-size:11px;font-weight:650;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);letter-spacing:.01em} .hchip.on{background:var(--accent-400);color:var(--accent-950);border-color:transparent} .th-staff{margin-inline-start:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .staffgrp{text-align:end} .staffgrp small{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-300);font-weight:700;margin-bottom:5px} .stack-av{display:flex} .stack-av .avatar{border:2px solid var(--primary-700);margin-inline-start:-8px} .stack-av .avatar:first-child{margin-inline-start:0} .stack-av .more{background:rgba(255,255,255,.2);font-size:10px} .th-actions{display:flex;gap:8px} .btn-glass{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);color:#fff} .btn-glass:hover{background:rgba(255,255,255,.24)} .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto} .tab{ display:inline-flex;align-items:center;gap:8px;padding:10px 15px;font-size:13px;font-weight:600; color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:.14s; } .tab:hover{color:var(--ink-2)} .tab.on{color:var(--primary-600);border-bottom-color:var(--primary-600);font-weight:700} .tab .ti{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--line-2);color:var(--muted)} .tab.on .ti{background:var(--primary-50);color:var(--primary-600)} .tab .n{font-size:10.5px;font-weight:700;background:var(--line-2);color:var(--muted);border-radius:99px;padding:1px 6px} .tab.on .n{background:var(--primary-50);color:var(--primary-600)} /* squad grid */ .squad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .pcard{ border:1px solid var(--line);border-radius:11px;background:var(--surface);overflow:hidden; transition:.15s;cursor:pointer;position:relative; } .pcard:hover{border-color:var(--primary-600);box-shadow:0 0 0 3px var(--primary-50);transform:translateY(-1px)} .pcard.idp{border-color:var(--accent-300);background:linear-gradient(180deg,var(--neutral-50),#fff 55%)} .pcard.idp:hover{border-color:var(--accent-600);box-shadow:0 0 0 3px rgba(199,240,0,.28)} .pc-top{display:flex;gap:9px;padding:10px 11px 8px;align-items:flex-start} .pc-top .info{min-width:0;flex:1} .pc-top .info b{display:block;font-size:12.5px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pc-top .info small{display:block;font-size:10.5px;color:var(--muted)} .pc-dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:5px} .pc-meta{display:flex;align-items:center;gap:8px;padding:7px 11px;border-top:1px solid var(--line-2);background:var(--surface-2);font-size:10.5px;color:var(--muted);font-weight:600} .pc-meta .flag{width:16px;height:11px;border-radius:2px;overflow:hidden;flex:none} .pc-meta .sp{margin-inline-start:auto;display:flex;gap:6px;color:var(--faint)} .pc-idp{padding:7px 11px;border-top:1px solid var(--accent-100);background:var(--accent-50);display:flex;align-items:center;gap:8px} .bar{height:5px;border-radius:99px;background:var(--line);overflow:hidden;flex:1} .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent-600),var(--accent-500))} .bar.blue i{background:linear-gradient(90deg,var(--primary-500),var(--primary-600))} .pc-idp small{font-size:10px;font-weight:700;color:var(--accent-800);flex:none} .pc-idp.none{background:var(--surface-2);border-top-color:var(--line-2);justify-content:center} .pc-idp.none small{color:var(--faint);font-weight:600;font-size:10.5px;letter-spacing:.01em} /* focus areas */ .fa{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line-2)} .fa:last-child{border-bottom:none} .fa .fi{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;font-size:14px} .fa .nm{flex:1;min-width:0} .fa .nm b{display:block;font-size:12.5px;font-weight:650} .fa .nm small{font-size:11px;color:var(--muted)} .stars{display:flex;gap:1.5px;flex:none} .stars span{color:var(--neutral-300);font-size:12px} .stars span.f{color:var(--warning)} /* fixture */ .fixture{padding:14px 16px} .fx-row{display:flex;align-items:center;gap:12px} .fx-team{flex:1;display:flex;align-items:center;gap:9px;min-width:0} .fx-team.r{justify-content:flex-end;text-align:end} .fx-badge{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--surface-2);border:1px solid var(--line)} .fx-team b{font-size:12.5px;font-weight:650;letter-spacing:-.01em} .fx-team small{display:block;font-size:10.5px;color:var(--muted)} .fx-vs{font-size:11px;font-weight:800;color:var(--faint);letter-spacing:.06em} .fx-meta{display:flex;gap:14px;margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);flex-wrap:wrap} .fx-meta div{font-size:11px;color:var(--muted)} .fx-meta b{display:block;font-size:12px;color:var(--ink);font-weight:650;margin-top:1px} /* mini stats */ .mini{display:grid;grid-template-columns:1fr 1fr;gap:10px} .mstat{border:1px solid var(--line-2);border-radius:10px;padding:11px 12px;background:var(--surface-2)} .mstat .l{font-size:10.5px;color:var(--muted);font-weight:650;letter-spacing:.02em} .mstat .v{font-size:19px;font-weight:750;letter-spacing:-.03em;margin-top:3px;font-variant-numeric:tabular-nums} .mstat .v small{font-size:11px;color:var(--muted);font-weight:600;margin-inline-start:4px} /* donut */ .donut-wrap{display:flex;align-items:center;gap:16px} .donut{width:96px;height:96px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative} .donut::after{content:"";position:absolute;inset:17px;border-radius:50%;background:var(--surface)} .donut .dv{position:relative;z-index:1;text-align:center;line-height:1.1} .donut .dv b{display:block;font-size:19px;font-weight:750;letter-spacing:-.03em} .donut .dv small{font-size:9.5px;color:var(--muted);font-weight:650;letter-spacing:.04em} .dleg{flex:1;display:flex;flex-direction:column;gap:7px} .dleg div{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-2)} .dleg i{width:9px;height:9px;border-radius:3px;flex:none} .dleg b{margin-inline-start:auto;font-weight:700;font-variant-numeric:tabular-nums} /* The share beside the count. Fixed width so the column of them lines up. */ .dleg .dleg-share{inline-size:36px;text-align:end;color:var(--muted);font-weight:650;font-variant-numeric:tabular-nums} /* video row */ .vrow{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);align-items:center} .vrow:last-child{border-bottom:none} .vthumb{width:74px;height:44px;border-radius:8px;flex:none;position:relative;overflow:hidden;background:linear-gradient(140deg,var(--good),var(--good-ink))} .vthumb .pl{position:absolute;inset:0;display:grid;place-items:center;color:#fff} .vthumb .dur{position:absolute;inset-inline-end:3px;bottom:3px;background:rgba(0,0,0,.7);color:#fff;font-size:8.5px;font-weight:700;padding:1px 4px;border-radius:3px} .vrow .vi{min-width:0;flex:1} .vrow .vi b{display:block;font-size:12.2px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vrow .vi small{font-size:10.5px;color:var(--muted)} /* upcoming list */ .upc{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line-2);align-items:center} .upc:last-child{border-bottom:none} .upc .d{width:40px;text-align:center;flex:none;border:1px solid var(--line);border-radius:8px;padding:4px 0;background:var(--surface-2)} .upc .d small{display:block;font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--critical);text-transform:uppercase} .upc .d b{display:block;font-size:15px;font-weight:750;letter-spacing:-.03em;line-height:1.1} .upc .ui{min-width:0;flex:1} .upc .ui b{display:block;font-size:12.3px;font-weight:650} .upc .ui small{font-size:11px;color:var(--muted)} .notice{ display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:10px; background:var(--primary-50);border:1px solid var(--primary-200);font-size:11.5px;color:var(--primary-800);line-height:1.5; } .notice b{font-weight:700} @media(max-width:1180px){ .kpis{grid-template-columns:repeat(3,1fr)} .cols{grid-template-columns:1fr} .squad{grid-template-columns:repeat(2,1fr)}} @media(max-width:820px){ .shell{grid-template-columns:1fr} .side{display:none} .kpis{grid-template-columns:repeat(2,1fr)} .tiles{grid-template-columns:1fr} /* THE TOP BAR HAD NO RESPONSIVE RULES AT ALL. The mockups were only ever viewed at desktop width, so at 375px the sync pill, the bell and the user block ran 143px past the edge and every screen in the product scrolled sideways on a phone. The layout breakpoints below were carried over from the mockups; this was simply missing. What goes, in order of how much it costs to lose it: - the customer's name, which is on the page anyway - the user's name and role, leaving the avatar, which is the affordance What STAYS is the sync pill: §7 requires it on screen on every screen, and a coach on a touchline needs it more than a coach at a desk. */ .tb-ma{display:none} .tb-user .who{display:none} .tb-user{padding-inline-start:8px;margin-inline-start:0} .tb-title{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0 } .topbar{gap:8px;padding-inline:10px}} /* ============================================================ EXTRA COMPONENTS — forms, tables, month calendar, charts Extends the base TDS design system. Same tokens throughout. ============================================================ */ /* ---------- FRAME NAV (multi-page) ---------- */ .frame-nav{margin-inline-start:auto;display:flex;align-items:center;gap:8px} /* ---------- PAGE TITLE ROW WITH CONTEXT CHIP ---------- */ .ctx-chip{ display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 5px;border-radius:99px; background:var(--primary-600);color:#fff;font-size:12.5px;font-weight:650;box-shadow:0 2px 8px rgba(11,95,208,.25); } .ctx-chip .ci{width:26px;height:26px;border-radius:50%;background:var(--accent-400);color:var(--accent-950);display:grid;place-items:center;flex:none} .ctx-arrow{color:var(--faint);font-weight:700} .ctx-plain{ display:inline-flex;align-items:center;height:34px;padding:0 13px;border-radius:9px; background:var(--surface);border:1px solid var(--line);font-size:12.5px;font-weight:650;box-shadow:var(--sh-1); } /* ---------- FILTER BAR ---------- */ .fbar{ display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--surface); border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;box-shadow:var(--sh-1);margin-bottom:16px; } .fld{display:flex;flex-direction:column;gap:4px;min-width:0} .fld > label{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.03em} .ctrl{ display:flex;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:8px; border:1px solid var(--line);background:var(--surface);font-size:12.5px;color:var(--ink); font-weight:500;white-space:nowrap;transition:.14s; } .ctrl:hover{border-color:var(--primary-200)} .ctrl svg{flex:none;color:var(--muted)} .ctrl .ph{color:var(--faint);font-weight:500} .ctrl.grow{flex:1;min-width:170px} .ctrl.w-sm{width:106px} .ctrl.w-md{width:150px} .ctrl.w-lg{width:196px} .ctrl .chev{margin-inline-start:auto;color:var(--faint)} .viewtog{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)} .viewtog button{width:34px;height:34px;display:grid;place-items:center;color:var(--muted)} .viewtog button.on{background:var(--primary-50);color:var(--primary-600)} /* ---------- SECTION FORM CARD ---------- */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} .fsec{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-1);overflow:hidden;position:relative; } .fsec::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--primary-600)} .fsec.a-amber::before{background:var(--warning)} .fsec.a-green::before{background:var(--good)} .fsec.a-violet::before{background:var(--cat-violet)} .fsec.a-teal::before{background:var(--cat-teal)} .fsec.a-rose::before{background:var(--critical)} .fsec.a-lime::before{background:var(--accent-600)} .fsec-h{display:flex;align-items:center;gap:10px;padding:12px 15px 12px 16px;border-bottom:1px solid var(--line-2)} .fsec-n{ width:22px;height:22px;border-radius:7px;background:var(--primary-50);color:var(--primary-600); display:grid;place-items:center;font-size:11px;font-weight:800;flex:none; } .fsec.a-amber .fsec-n{background:var(--warning-tint);color:var(--warning)} .fsec.a-green .fsec-n{background:var(--good-tint);color:var(--good)} .fsec.a-violet .fsec-n{background:var(--cat-violet-tint);color:var(--cat-violet)} .fsec.a-teal .fsec-n{background:var(--cat-teal-tint);color:var(--cat-teal)} .fsec.a-rose .fsec-n{background:var(--neutral-100);color:var(--critical)} .fsec.a-lime .fsec-n{background:var(--accent-100);color:var(--accent-800)} .fsec-h h3{font-size:13.5px;font-weight:700;letter-spacing:-.01em} .fsec-h .hint{margin-inline-start:auto;font-size:11px;color:var(--faint);display:flex;align-items:center;gap:6px} .fsec-b{padding:14px 16px} .fields{display:grid;gap:12px} .fields.c2{grid-template-columns:1fr 1fr} .fields.c3{grid-template-columns:1fr 1fr 1fr} /* Four across, for the assessment scores: technical, tactical, physical, mental. They are one judgement made in one pass, and a column of four full-width selects reads as four unrelated questions. */ .fields.c4{grid-template-columns:repeat(4,1fr)} /* One column on a phone. These had NO responsive rule at all, so a two-column dialog at 375px gave each select about 103px - too narrow to read "Data Protection Owner" or "The whole programme" in its closed state, and the three-column squad dialog was worse. A form control the reader cannot read is not narrow, it is broken, and stacking costs nothing but height on a screen that scrolls anyway. */ @media (max-width:900px){ /* Four narrow selects go to two-by-two before they go to one column: the scores are short words and a 2x2 block still reads as one control. */ .fields.c4{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .fields.c2,.fields.c3,.fields.c4{grid-template-columns:1fr} } .f{display:flex;flex-direction:column;gap:5px;min-width:0} .f > label{font-size:11px;font-weight:650;color:var(--ink-2);letter-spacing:.01em} .f > label .req{color:var(--critical);margin-inline-start:2px} .inp{ display:flex;align-items:center;gap:8px;height:36px;padding:0 11px;border-radius:8px; border:1px solid var(--line);background:var(--surface);font-size:12.5px;color:var(--ink);transition:.14s; } .inp:hover{border-color:var(--primary-200)} .inp.focus{border-color:var(--primary-600);box-shadow:0 0 0 3px var(--primary-50)} .inp .val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .inp .ph{color:var(--faint)} .inp svg{flex:none;color:var(--muted)} .inp .chev{margin-inline-start:auto;color:var(--faint)} .inp.ro{background:var(--surface-2);color:var(--ink-2)} /* A field's own validation message. Step 11.3, AC 11.3.4. The colour is NOT the message: the text says what is wrong, and the field it belongs to is named by aria-describedby. Red here is emphasis for the people who can see it, never the thing carrying the meaning - which is also why the border below changes as well as the text, so the field is findable by someone who cannot separate red from grey. */ .f-err{font-size:11px;font-weight:600;color:var(--critical);margin:0;line-height:1.45} /* A statement of fact beside a field, not a validation failure. Step GB.5.0: "nobody here can be recorded as delivering this" is true, actionable and not the coach's mistake, so it reads in muted ink rather than in the critical colour that means they typed something wrong. */ .f-hint{font-size:11px;color:var(--muted);margin:0;line-height:1.45} .f:has(.f-err) .inp{border-color:var(--critical)} .f:has(.f-err) .inp:focus-within{box-shadow:0 0 0 3px var(--critical-tint)} .ta{ border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:9px 11px; font-size:12.5px;color:var(--faint);min-height:64px;position:relative;line-height:1.5; } .ta.filled{color:var(--ink-2)} .ta .count{position:absolute;inset-inline-end:8px;bottom:5px;font-size:10px;color:var(--faint);font-weight:600} .ta .grip{position:absolute;inset-inline-end:4px;bottom:4px;color:var(--primary-200)} /* segmented control */ .segc{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)} .segc span{ flex:1;text-align:center;padding:7px 4px;font-size:11.5px;font-weight:600;color:var(--muted); border-inline-start:1px solid var(--line-2);white-space:nowrap; } .segc span:first-child{border-inline-start:none} .segc span.on{background:var(--primary-600);color:#fff;font-weight:700} .segc.lime span.on{background:var(--accent-400);color:var(--accent-950)} /* toggle */ .tgl{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--ink-2)} .tgl i{ width:34px;height:19px;border-radius:99px;background:var(--neutral-200);position:relative;flex:none;transition:.15s; } .tgl i::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:.15s} .tgl.on i{background:var(--good)} .tgl.on i::after{inset-inline-start:17px} /* checkbox */ .cbx{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--neutral-300);background:var(--surface);display:inline-grid;place-items:center;flex:none} .cbx.on{background:var(--primary-600);border-color:var(--primary-600);color:#fff} .cbx.lime.on{background:var(--accent-600);border-color:var(--accent-600);color:var(--accent-900)} /* stepper */ .step{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;height:36px;background:var(--surface)} .step .n{flex:1;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums} .step .ar{display:flex;flex-direction:column;border-inline-start:1px solid var(--line-2)} .step .ar button{width:24px;height:17px;display:grid;place-items:center;color:var(--muted)} .step .ar button:first-child{border-bottom:1px solid var(--line-2)} .step .ar button:hover{background:var(--surface-2);color:var(--ink)} /* dropzone */ .dz{ border:1.6px dashed var(--primary-300);border-radius:11px;background:var(--neutral-50);padding:16px;text-align:center; } .dz .di{width:34px;height:34px;border-radius:50%;background:var(--primary-50);color:var(--primary-600);display:grid;place-items:center;margin:0 auto 8px} .dz b{display:block;font-size:12.5px;font-weight:650} .dz small{display:block;font-size:11px;color:var(--muted);margin-top:2px} .dz-btns{display:flex;gap:8px;justify-content:center;margin-top:11px;flex-wrap:wrap} /* The dropzone IS the file input: transparent, covering the area, so a dropped file lands anywhere on it. The buttons sit above it and stay clickable. */ .dz{position:relative} .dz-input{position:absolute;inset:0;inline-size:100%;block-size:100%;opacity:0;cursor:pointer} .dz-btns{position:relative;z-index:1} .dz-spent{display:none} .dz:has(.dz-input:focus-visible){outline:2px solid var(--primary-600);outline-offset:2px} label.btn{cursor:pointer} .filerow .fr-x{inline-size:26px;block-size:26px;border-radius:7px;display:grid;place-items:center;color:var(--muted);background:none;border:none;cursor:pointer} .filerow .fr-x:hover,.filerow .fr-x:focus-visible{background:var(--surface-2);color:var(--critical)} /* Players picked for a session or a match. */ .pick-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 12px;margin-block-start:10px;max-block-size:280px;overflow-y:auto;padding:4px;border:1px solid var(--line);border-radius:9px} .pick-list label{display:flex;align-items:center;gap:8px;min-block-size:var(--tap);padding:0 6px;border-radius:7px;font-size:12.5px;cursor:pointer} .pick-list label:hover{background:var(--surface-2)} .pick-list .num{color:var(--faint);font-size:11px;font-weight:700;min-inline-size:18px;text-align:end} .pick-tools{display:flex;gap:8px;margin-block-start:8px;flex-wrap:wrap} /* Step 4.3 and INJ.4.1: a child who cannot be picked, or only after a confirming tap. */ .pick-list label.is-unavailable{color:var(--muted)} .pick-why{margin-inline-start:auto;font-size:11px;color:var(--muted)} .pick-confirm{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;background:var(--surface-2);font-size:12px} .form-note{font-size:11.5px;color:var(--muted);margin-block-start:8px} .tpl-list{display:grid;gap:4px} .clip-pick{display:grid;gap:4px;max-block-size:50vh;overflow-y:auto} .clip-pick label{display:flex;align-items:center;gap:10px;min-block-size:var(--tap);padding:6px 8px;border-radius:8px;cursor:pointer;font-size:12.5px} .clip-pick label:hover{background:var(--surface-2)} .clip-pick small{display:block;color:var(--muted);font-size:11px} /* The notification panel opens from the bell, near the end of the bar. */ .tb-notes{position:relative} .tb-notes .sr{inset-inline-start:auto;inset-inline-end:0;inline-size:min(380px, 92vw)} .season-pick{position:relative;display:inline-block} .season-pick .sr{inline-size:min(260px, 92vw)} .filerow{ display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:9px; background:var(--surface);margin-top:9px;font-size:12px; } .filerow .fi{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;flex:none;font-size:9px;font-weight:800;color:#fff} .filerow .fi.pdf{background:var(--critical)} .filerow .fi.xls{background:var(--good)} .filerow .fi.vid{background:var(--cat-violet)} .filerow b{font-weight:650;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .filerow time{color:var(--faint);font-size:10.5px;font-weight:600;white-space:nowrap} .filerow .ok{color:var(--good)} /* attendance / selection list */ .plist{border:1px solid var(--line-2);border-radius:9px;overflow:hidden} .plist-h{display:grid;gap:8px;padding:7px 11px;background:var(--surface-2);border-bottom:1px solid var(--line-2);font-size:10px;font-weight:750;color:var(--muted);letter-spacing:.06em;text-transform:uppercase} .plist-r{display:grid;gap:8px;padding:7px 11px;border-bottom:1px solid var(--line-2);font-size:12px;align-items:center} .plist-r:last-child{border-bottom:none} .plist-r:hover{background:var(--surface-2)} .plist-r .idx{color:var(--faint);font-weight:650;font-variant-numeric:tabular-nums} .plist-r b{font-weight:600} .plist-scroll{max-height:212px;overflow:hidden;position:relative} .plist-scroll::after{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;height:26px;background:linear-gradient(transparent,#fff)} /* ---------- FOOTER ACTION BAR ---------- */ .actionbar{ display:flex;align-items:center;gap:10px;padding:13px 16px;margin-top:16px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1); } .actionbar .note{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px} .actionbar .sp{margin-inline-start:auto;display:flex;gap:9px} /* THE ACTION BAR HAD NO PHONE LAYOUT. Found in task 7.3 on the IDP screen at 375 px: the note and the buttons shared one row, so a two-line note squeezed "Publish plan" until it was clipped by the viewport. It stacks now - the note above, the buttons on their own full-width row - which is also the order somebody reads them in. Section 12: the primary action is at the bottom of the thumb zone, full width, always reachable one-handed. */ @media(max-width:720px){ .actionbar{flex-wrap:wrap;padding:12px} .actionbar .note{flex-basis:100%;order:-1} .actionbar .sp{margin-inline-start:0;inline-size:100%;justify-content:stretch} .actionbar .sp > *{flex:1 1 0;min-inline-size:0} .actionbar .sp .btn{inline-size:100%;justify-content:center} } /* ---------- DATA TABLE ---------- */ .dt{width:100%;border-collapse:collapse;font-size:12.3px} /* ---- controls INSIDE a table cell ------------------------------------------- `.inp` is the wrapper TdsField draws around a control, not the control, so it cannot be reused here: a nine-column grid of editable cells needs the control itself to be the compact thing. Borderless until hovered or focused, because nine bordered boxes per row across six rows is a screen of boxes rather than a plan. */ .gi{ inline-size:100%;min-inline-size:0;box-sizing:border-box; font:inherit;font-size:12px;color:var(--ink); background:transparent;border:1px solid transparent;border-radius:6px; padding:4px 6px; } .gi:hover:not(:disabled){border-color:var(--line);background:var(--surface)} .gi:focus{outline:none;border-color:var(--primary-600);box-shadow:0 0 0 3px var(--primary-50);background:var(--surface)} .gi:disabled{color:var(--ink-2);background:transparent;border-color:transparent;cursor:not-allowed} .gi-area{resize:vertical;line-height:1.35;min-block-size:38px} /* A focus row is the part the child acts on, so it is the part that stands out on the coach's screen too. */ .dt tr.row-focus > td{background:var(--primary-50)} /* An overdue review is the row somebody has to act on. Tinted, not shouted: a list where half the rows are red is a list nobody reads. */ .dt tr.row-overdue > td{background:var(--warning-tint)} /* One number, said once, large. The "gap" card on the IDP report. */ .fig-lg{font-size:34px;font-weight:750;letter-spacing:-.02em;line-height:1.1;margin:0 0 4px} .gchk{display:inline-flex;align-items:center;justify-content:center} .gchk input{inline-size:16px;block-size:16px;accent-color:var(--primary-600);cursor:pointer} .gchk input:disabled{cursor:not-allowed} /* A video card that is a play control says so on hover and on focus. Without the focus ring the library is reachable by keyboard and invisible to one. */ /* The card's picture-and-title is a real