/* FPL Planner. SCOPING CONTRACT (mirrors apps/trip-planner/css/styles.css): the class .fpl-planner-app lives on the app ROOT WRAPPER, a div inside , and NEVER on itself. Shared page components (site header/footer, the firebase-auth sign-out modal, #sync-banner, anything shared scripts append to ) render OUTSIDE that wrapper and therefore cannot be touched by these rules. Page-level look only (background, tokens, color-scheme) lives on body.fpl-page. Enforced by sync-system/tests/shared-ui-consistency.test.mjs. COUNTER-PIN NOTE: assets/css/main.css paints every button `color: #555 !important` with a red `:hover`, plus a fixed 3.25rem height and an inset gray ring. Section "main.css counter-pins" at the bottom of this file re-declares colour with !important at higher specificity for every interactive element in the app. Verify with computed styles, never by eye. */ body.fpl-page { --fpl-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --fpl-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; --bg: #0b0d12; --bg-soft: #10141c; --bg-card: #141a24; --bg-raised: #1b2331; --bg-sunk: #0d1118; --border: #242e3d; --border-soft: #1b2331; --border-strong: #33415a; --text: #e7edf7; --text-dim: #93a1b5; /* Every faint label (stat captions, meta lines, a card's fixture string) used #6a7789, which scored 4.27 / 4.15 / 3.98 / 3.82 / 3.66 against the five surfaces these labels actually sit on: #0b0d12, #0d1118, #11161f, #141a24 and #171e2a. All of those are under the 4.5:1 WCAG AA floor for normal text. #77869a is the smallest hue-preserving lift that clears 4.5 on ALL five, measuring 5.24 / 5.10 / 4.89 / 4.71 / 4.51. Re-check all five ratios before darkening it, the lightest surface is the binding one. */ --text-faint: #77869a; /* --accent reads as a blue word on a dark surface. Filled surfaces use --accent-fill instead, which carries white text at an accessible ratio. */ --accent: #5aa2ff; --accent-fill: #1f5fd0; --accent-soft: rgba(90, 162, 255, 0.13); --green: #34c98e; --green-soft: rgba(52, 201, 142, 0.13); --green-fill: #147a55; --amber: #edaf46; --amber-soft: rgba(237, 175, 70, 0.14); --red: #f2657a; --red-soft: rgba(242, 101, 122, 0.13); --violet: #a78bfa; --violet-soft: rgba(167, 139, 250, 0.14); --gray-soft: rgba(147, 161, 181, 0.12); /* the pitch surface: a flat, desaturated green so player cards stay the brightest thing on it. The stripes are a 3% overlay, not a gradient look. */ --pitch: #101d18; --pitch-line: rgba(231, 237, 247, 0.09); --radius: 14px; --radius-sm: 9px; --shadow: 0 18px 44px rgba(0, 0, 0, 0.48); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3); --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.55); /* Motion: one speed for hovers, one for entrances. Guarded by the prefers-reduced-motion block at the bottom of this file. */ --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --t-fast: 0.15s; --t-slow: 0.3s; color-scheme: dark; } body.fpl-page { margin: 0; /* A faint accent glow at the top of the page, so the app opens onto depth rather than a flat slab. Fixed attachment keeps it at the viewport top. */ background: radial-gradient(1100px 420px at 50% -140px, rgba(90, 162, 255, 0.07), transparent 70%), var(--bg); background-attachment: fixed; } /* Typography and colour live on the app root, never on , so they cannot inherit into shared components appended to . */ .fpl-planner-app { color: var(--text); font: 15px/1.55 var(--fpl-font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } .fpl-planner-app *, .fpl-planner-app *::before, .fpl-planner-app *::after { box-sizing: border-box; } .fpl-planner-app .fpl-main { max-width: 1180px; margin: 0 auto; padding: 26px 20px 72px; } .fpl-planner-app [hidden] { display: none !important; } .fpl-planner-app h1, .fpl-planner-app h2, .fpl-planner-app h3, .fpl-planner-app h4 { margin: 0; color: var(--text); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; /* main.css uppercases headings site-wide; this app writes its headings in sentence case and means it. The few labels that ARE uppercase (card heads, stat keys) set text-transform themselves. */ text-transform: none; } .fpl-planner-app p { margin: 0; } .fpl-planner-app code { font-family: var(--fpl-mono); font-size: 0.9em; background: var(--bg-sunk); border: 1px solid var(--border-soft); border-radius: 4px; padding: 1px 5px; } .fpl-planner-app a { color: var(--accent); text-decoration: none; } .fpl-planner-app a:hover { text-decoration: underline; } /* ---------------------------------------------------------------- controls */ .fpl-planner-app button { appearance: none; -webkit-appearance: none; font: inherit; font-weight: 550; /* main.css fixes every button at 3.25rem tall with a 1.75rem side padding and an inset gray ring. All three are reset here. */ height: auto; line-height: 1.3; padding: 9px 14px; min-height: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: none; background: var(--bg-raised); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .fpl-planner-app button:hover { background: #232d3e; border-color: #3d4d69; box-shadow: none; } .fpl-planner-app button:hover:active { background: #1a2230; transform: translateY(1px); } .fpl-planner-app button:focus-visible, .fpl-planner-app input:focus-visible, .fpl-planner-app select:focus-visible, .fpl-planner-app summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .fpl-planner-app button:disabled { opacity: 0.55; cursor: default; pointer-events: none; } .fpl-planner-app .fpl-btn-primary { background: linear-gradient(180deg, #2a6fe0, var(--accent-fill)); border-color: #2a6fe0; box-shadow: 0 6px 18px rgba(31, 95, 208, 0.32); } .fpl-planner-app .fpl-btn-primary:hover { background: linear-gradient(180deg, #3579e6, #2364d6); border-color: #3579e6; box-shadow: 0 8px 22px rgba(31, 95, 208, 0.4); } .fpl-planner-app .fpl-btn-primary:hover:active { background: #1a52b4; box-shadow: 0 3px 10px rgba(31, 95, 208, 0.3); } .fpl-planner-app .fpl-btn-quiet { background: transparent; border-color: var(--border); } .fpl-planner-app .fpl-btn-quiet:hover { background: var(--gray-soft); border-color: var(--border-strong); } .fpl-planner-app .fpl-btn-danger { background: transparent; border-color: color-mix(in srgb, var(--red) 45%, var(--border)); } .fpl-planner-app .fpl-btn-danger:hover { background: var(--red-soft); border-color: var(--red); } .fpl-planner-app .fpl-btn-sm { min-height: 34px; padding: 6px 11px; font-size: 13px; } .fpl-planner-app input, .fpl-planner-app select { font: inherit; color: var(--text); background: var(--bg-sunk); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; min-height: 44px; width: 100%; } .fpl-planner-app input::placeholder { color: var(--text-faint); } .fpl-planner-app input:focus, /* Colour the border on focus, but never remove the ring: this rule sits after the :focus-visible block above and has equal specificity, so `outline: none` here used to win and leave keyboard users on the settings dropdowns with a colour-only cue. Scoped to :focus:not(:focus-visible) so a mouse click still gets the quiet treatment while keyboard focus keeps its ring. */ .fpl-planner-app select:focus { border-color: var(--accent); } .fpl-planner-app select:focus:not(:focus-visible) { outline: none; } .fpl-planner-app .fpl-field-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } /* segmented control */ .fpl-planner-app .fpl-seg { display: inline-flex; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 3px; } .fpl-planner-app .fpl-seg > button { border: 0; background: transparent; border-radius: 7px; min-height: 34px; padding: 6px 14px; font-size: 13px; } .fpl-planner-app .fpl-seg > button:hover { background: var(--gray-soft); } .fpl-planner-app .fpl-seg > button.is-on { background: var(--accent-fill); } .fpl-planner-app .fpl-seg > button.is-on:hover { background: #2a6fe0; } /* ---------------------------------------------------------------- landing */ .fpl-planner-app .fpl-landing { max-width: 880px; margin: 0 auto; } .fpl-planner-app .fpl-landing-head { padding: 34px 0 4px; text-align: center; } .fpl-planner-app .fpl-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 999px; background: var(--accent-soft); } .fpl-planner-app .fpl-landing h1 { font-size: 50px; letter-spacing: -0.032em; } .fpl-planner-app .fpl-lede { margin: 16px auto 0; font-size: 17.5px; line-height: 1.65; color: var(--text-dim); max-width: 60ch; } .fpl-planner-app .fpl-onboard { margin: 32px auto 0; max-width: 640px; padding: 24px; background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, rgba(90, 162, 255, 0.45), rgba(167, 139, 250, 0.25) 55%, var(--border) 90%) border-box; border: 1px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow-sm); } .fpl-planner-app .fpl-onboard-row { display: flex; gap: 10px; align-items: stretch; } .fpl-planner-app .fpl-onboard-row .fpl-input { flex: 1 1 auto; min-width: 0; font-size: 17px; letter-spacing: 0.02em; } .fpl-planner-app .fpl-onboard-row button { flex: 0 0 auto; min-height: 44px; padding: 11px 20px; } .fpl-planner-app .fpl-onboard-error { margin-top: 12px; padding: 10px 12px; background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); border-radius: var(--radius-sm); color: color-mix(in srgb, var(--red) 72%, var(--text)); font-size: 14px; } .fpl-planner-app .fpl-onboard-hint { margin-top: 14px; color: var(--text-faint); font-size: 13.5px; line-height: 1.6; } .fpl-planner-app .fpl-landing-prose { margin-top: 52px; display: grid; gap: 40px; } .fpl-planner-app .fpl-prose-block h2 { font-size: 21px; margin-bottom: 10px; } .fpl-planner-app .fpl-prose-block p { color: var(--text-dim); line-height: 1.7; max-width: 70ch; } /* the five method cards */ .fpl-planner-app .fpl-feature-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } .fpl-planner-app .fpl-feature { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 17px 16px; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .fpl-planner-app .fpl-feature:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .fpl-planner-app .fpl-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); color: var(--accent); font-size: 15px; margin-bottom: 12px; } .fpl-planner-app .fpl-feature h3 { font-size: 15px; margin-bottom: 6px; } .fpl-planner-app .fpl-feature p { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); } /* the two closing blocks, side by side where there is room */ .fpl-planner-app .fpl-prose-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; } .fpl-planner-app .fpl-prose-block.is-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px; } .fpl-planner-app .fpl-prose-block.is-card h2 { font-size: 17px; } .fpl-planner-app .fpl-prose-block.is-card p { font-size: 14px; } .fpl-planner-app .fpl-attribution { margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--border-soft); color: var(--text-faint); font-size: 12.5px; line-height: 1.6; } /* ---------------------------------------------------------------- app shell */ .fpl-planner-app .fpl-sample-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; padding: 11px 14px; background: var(--violet-soft); border: 1px solid color-mix(in srgb, var(--violet) 38%, transparent); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 13.5px; } .fpl-planner-app .fpl-sample-banner strong { color: var(--violet); } .fpl-planner-app .fpl-tag-sample { display: inline-block; padding: 2px 7px; border-radius: 5px; background: var(--violet-soft); border: 1px solid color-mix(in srgb, var(--violet) 38%, transparent); color: var(--violet); font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; vertical-align: middle; } /* Sticky, lightly frosted: the identity and the tab strip stay in reach while the plan scrolls. The negative margins let the bar paint edge to edge across .fpl-main's padding so content does not peek past it while scrolling. */ .fpl-planner-app .fpl-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; position: sticky; top: 0; z-index: 40; margin: 0 -20px 20px; padding: 14px 20px 12px; border-bottom: 1px solid var(--border-soft); /* Nearly opaque on purpose: backdrop-filter support varies (headless and older engines skip it) and content must never read through the bar. */ background: color-mix(in srgb, var(--bg) 97%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .fpl-planner-app .fpl-identity { min-width: 0; } .fpl-planner-app .fpl-team-name { font-size: 20px; font-weight: 650; letter-spacing: -0.015em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fpl-planner-app .fpl-manager { color: var(--text-faint); font-size: 13px; margin-top: 2px; } .fpl-planner-app .fpl-idstats { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; } .fpl-planner-app .fpl-stat-k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); } .fpl-planner-app .fpl-stat-v { font-size: 16px; font-weight: 600; margin-top: 2px; } /* The tab strip sits on its own line under the identity row, but it is sized by its labels rather than stretched across the page. */ .fpl-planner-app .fpl-tabs { display: flex; gap: 3px; width: auto; flex-basis: 100%; } .fpl-planner-app .fpl-tabs.fpl-seg { align-self: flex-start; } .fpl-planner-app .fpl-tab-icon { font-size: 12px; opacity: 0.75; } .fpl-planner-app .fpl-tabs > button.is-on .fpl-tab-icon { opacity: 1; } .fpl-planner-app .fpl-view { display: none; } .fpl-planner-app .fpl-view.is-active { display: block; animation: fpl-view-in var(--t-slow) var(--ease); } @keyframes fpl-view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---------------------------------------------------------------- the answer */ .fpl-planner-app .fpl-hero { position: relative; overflow: hidden; background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, rgba(90, 162, 255, 0.5), rgba(167, 139, 250, 0.28) 45%, var(--border) 85%) border-box; border: 1px solid transparent; border-radius: var(--radius); padding: 22px 24px 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); } /* a quiet glow in the corner the gradient border starts from */ .fpl-planner-app .fpl-hero::before { content: ""; position: absolute; top: -120px; left: -80px; width: 420px; height: 260px; background: radial-gradient(closest-side, rgba(90, 162, 255, 0.1), transparent); pointer-events: none; } .fpl-planner-app .fpl-hero > * { position: relative; } .fpl-planner-app .fpl-hero-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); } .fpl-planner-app .fpl-gw-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); padding: 4px 11px; border-radius: 999px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); } .fpl-planner-app .fpl-deadline { display: inline-flex; align-items: baseline; gap: 5px; font-size: 13px; color: var(--text-dim); padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-sunk); } .fpl-planner-app .fpl-deadline strong { color: var(--text); font-weight: 650; } .fpl-planner-app .fpl-deadline.is-urgent { border-color: color-mix(in srgb, var(--amber) 40%, transparent); background: var(--amber-soft); } .fpl-planner-app .fpl-deadline.is-urgent strong { color: var(--amber); } .fpl-planner-app .fpl-hero-headline { font-size: 34px; letter-spacing: -0.028em; margin-top: 16px; } .fpl-planner-app .fpl-hero-sub { margin-top: 7px; color: var(--text-dim); font-size: 15px; line-height: 1.5; } .fpl-planner-app .fpl-hero-sub .fpl-pname { color: var(--text); font-weight: 600; } /* The confidence band. It sits between the action and the facts, so the answer is still the first thing read and the band qualifies it rather than gating it. Colours are the existing green / amber / red tokens on their own soft fills; measured against the blended surface they sit on, the pill text scores 6.79 (green on #183132), 8.53 (amber on #1e2028) and 5.29 (red on #241d25), and the sentence in --text-dim scores 6.19 / 6.15 / 6.02 on the same three. All clear the 4.5:1 AA floor for normal text. */ .fpl-planner-app .fpl-conf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 9px 12px; border: 1px solid; border-radius: var(--radius-sm); } .fpl-planner-app .fpl-conf.is-high { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent); } .fpl-planner-app .fpl-conf.is-moderate { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 32%, transparent); } .fpl-planner-app .fpl-conf.is-low { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 34%, transparent); } .fpl-planner-app .fpl-conf-pill { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; } .fpl-planner-app .fpl-conf.is-high .fpl-conf-pill { color: var(--green); } .fpl-planner-app .fpl-conf.is-moderate .fpl-conf-pill { color: var(--amber); } .fpl-planner-app .fpl-conf.is-low .fpl-conf-pill { color: var(--red); } .fpl-planner-app .fpl-conf-why { flex: 1 1 320px; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); } /* Inside a panel that already has its own fill (a future gameweek column). */ .fpl-planner-app .fpl-conf.is-bare { display: block; background: none; border: 0; padding: 0; margin-top: 8px; } .fpl-planner-app .fpl-conf.is-bare .fpl-conf-why { display: block; margin-top: 2px; font-size: 12px; color: var(--text-faint); } /* The for/against tag on each verdict row, inside "Why this plan?". A quiet pill rather than bare text, so it reads as metadata attached to the row. */ .fpl-planner-app .fpl-conf-mark { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; padding: 2px 8px; border-radius: 999px; border: 1px solid; align-self: center; } .fpl-planner-app .fpl-conf-mark.is-for { color: var(--green); background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent); } .fpl-planner-app .fpl-conf-mark.is-against { color: var(--amber); background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 32%, transparent); } .fpl-planner-app .fpl-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; } .fpl-planner-app .fpl-fact { background: var(--bg-sunk); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 11px 13px; min-width: 0; transition: border-color var(--t-fast) var(--ease); } .fpl-planner-app .fpl-fact:hover { border-color: var(--border-strong); } .fpl-planner-app .fpl-fact-k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); } .fpl-planner-app .fpl-fact-v { margin-top: 3px; font-size: 17px; font-weight: 680; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fpl-planner-app .fpl-fact-note { margin-top: 1px; font-size: 12px; color: var(--text-faint); } .fpl-planner-app .fpl-fact.is-good .fpl-fact-v { color: var(--green); } .fpl-planner-app .fpl-fact.is-chip .fpl-fact-v { color: var(--violet); } /* ---------------------------------------------------------------- cards */ .fpl-planner-app .fpl-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; transition: border-color var(--t-fast) var(--ease); } .fpl-planner-app .fpl-card:hover { border-color: var(--border-strong); } .fpl-planner-app .fpl-card-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fpl-planner-app .fpl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); } .fpl-planner-app .fpl-card-head h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); font-weight: 650; } .fpl-planner-app .fpl-card-body { padding: 18px; } .fpl-planner-app .fpl-card-sub { color: var(--text-faint); font-size: 12.5px; } .fpl-planner-app .fpl-note { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; } .fpl-planner-app .fpl-empty { color: var(--text-faint); font-size: 13.5px; } /* transfer pair */ .fpl-planner-app .fpl-transfer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 12px; } .fpl-planner-app .fpl-transfer + .fpl-transfer { margin-top: 12px; } .fpl-planner-app .fpl-tr-side { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--bg-sunk); min-width: 0; } .fpl-planner-app .fpl-tr-side.is-out { border-color: color-mix(in srgb, var(--red) 32%, var(--border)); } .fpl-planner-app .fpl-tr-side.is-in { border-color: color-mix(in srgb, var(--green) 32%, var(--border)); } .fpl-planner-app .fpl-tr-dir { font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } .fpl-planner-app .fpl-tr-side.is-out .fpl-tr-dir { color: var(--red); } .fpl-planner-app .fpl-tr-side.is-in .fpl-tr-dir { color: var(--green); } .fpl-planner-app .fpl-tr-name { font-size: 17px; font-weight: 650; margin-top: 4px; } .fpl-planner-app .fpl-tr-meta { color: var(--text-faint); font-size: 12.5px; margin-top: 2px; } .fpl-planner-app .fpl-tr-nums { display: flex; gap: 14px; margin-top: 9px; flex-wrap: wrap; } .fpl-planner-app .fpl-tr-num-k { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .fpl-planner-app .fpl-tr-num-v { font-size: 15px; font-weight: 600; } .fpl-planner-app .fpl-tr-arrow { display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 20px; padding: 0 2px; } .fpl-planner-app .fpl-tr-gain { grid-column: 1 / -1; display: flex; gap: 22px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border-soft); } .fpl-planner-app .fpl-gain-v { font-size: 15px; font-weight: 650; color: var(--green); } .fpl-planner-app .fpl-gain-v.is-neg { color: var(--red); } .fpl-planner-app .fpl-gain-k { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .fpl-planner-app .fpl-money-row { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--text-dim); } .fpl-planner-app .fpl-money-row b { color: var(--text); font-weight: 600; } /* a positive "no action" statement, never an empty state */ .fpl-planner-app .fpl-affirm { display: flex; gap: 13px; align-items: flex-start; padding: 15px 16px; background: var(--green-soft); border: 1px solid color-mix(in srgb, var(--green) 34%, transparent); border-radius: var(--radius-sm); } .fpl-planner-app .fpl-affirm.is-chip { background: var(--violet-soft); border-color: color-mix(in srgb, var(--violet) 34%, transparent); } .fpl-planner-app .fpl-affirm-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; background: color-mix(in srgb, var(--green) 24%, transparent); border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); color: var(--green); } .fpl-planner-app .fpl-affirm.is-chip .fpl-affirm-mark { background: color-mix(in srgb, var(--violet) 24%, transparent); border-color: color-mix(in srgb, var(--violet) 45%, transparent); color: var(--violet); } .fpl-planner-app .fpl-affirm-title { font-size: 16px; font-weight: 650; } .fpl-planner-app .fpl-affirm-body { margin-top: 4px; color: var(--text-dim); font-size: 13.5px; line-height: 1.6; } /* ---------------------------------------------------------------- pitch */ .fpl-planner-app .fpl-pitch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .fpl-planner-app .fpl-pitch { background: var(--pitch); background-image: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.022) 0 44px, rgba(255, 255, 255, 0) 44px 88px ); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 12px; display: grid; gap: 12px; position: relative; } .fpl-planner-app .fpl-pitch::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; border-top: 1px solid var(--pitch-line); pointer-events: none; } /* the centre circle, under the cards */ .fpl-planner-app .fpl-pitch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border: 1px solid var(--pitch-line); border-radius: 50%; pointer-events: none; } .fpl-planner-app .fpl-row { display: flex; justify-content: center; gap: 8px; position: relative; z-index: 1; /* A grid item's automatic minimum size is its min-content width, and the five-across midfield row's min-content is wider than a 390px screen. That one column then sizes every row, so the whole pitch scrolled sideways. Zero lets the row shrink and the cards ellipsis instead. */ min-width: 0; } .fpl-planner-app .fpl-bench { margin-top: 14px; padding: 14px 12px 12px; background: var(--bg-sunk); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); } .fpl-planner-app .fpl-bench-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; } .fpl-planner-app .fpl-bench-row { display: flex; justify-content: center; gap: 8px; min-width: 0; } /* Same shrink rule as a pitch row: the slot wraps the card, so it is the slot that has to be allowed below its min-content width. */ .fpl-planner-app .fpl-bench-slot { position: relative; flex: 1 1 0; min-width: 0; max-width: 152px; } .fpl-planner-app .fpl-bench-num { position: absolute; top: -7px; left: -6px; z-index: 2; width: 19px; height: 19px; border-radius: 50%; background: var(--bg-raised); border: 1px solid var(--border-strong); color: var(--text-dim); font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .fpl-planner-app .fpl-bench-slot.is-gk .fpl-bench-num { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 45%, transparent); color: var(--amber); } /* player card */ .fpl-planner-app .fpl-pp { flex: 1 1 0; min-width: 0; max-width: 152px; background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--border-strong); border-radius: var(--radius-sm); padding: 7px 8px 8px; position: relative; text-align: center; box-shadow: var(--shadow-sm); transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } /* Clickable cards open the player drawer. The affordance is the lift. */ .fpl-planner-app .fpl-pp.is-press { cursor: pointer; } .fpl-planner-app .fpl-pp.is-press:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .fpl-planner-app .fpl-pp.is-press:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .fpl-planner-app .fpl-pp.pos-1 { border-top-color: var(--amber); } .fpl-planner-app .fpl-pp.pos-2 { border-top-color: var(--accent); } .fpl-planner-app .fpl-pp.pos-3 { border-top-color: var(--green); } .fpl-planner-app .fpl-pp.pos-4 { border-top-color: var(--violet); } .fpl-planner-app .fpl-pp-name { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; } .fpl-planner-app .fpl-pp-meta { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .fpl-planner-app .fpl-pp-fix { font-size: 11px; color: var(--text-dim); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fpl-planner-app .fpl-pp-xp { margin-top: 5px; font-size: 13px; font-weight: 650; color: var(--text); } .fpl-planner-app .fpl-pp-xp span { font-size: 10px; font-weight: 500; color: var(--text-faint); margin-left: 2px; } .fpl-planner-app .fpl-pp-arm { position: absolute; top: -8px; right: -6px; width: 21px; height: 21px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; border: 1px solid; z-index: 2; } .fpl-planner-app .fpl-pp-arm.is-c { background: var(--accent-fill); border-color: #4b86e6; color: #fff; } .fpl-planner-app .fpl-pp-arm.is-v { background: var(--bg-raised); border-color: var(--border-strong); color: var(--text-dim); } .fpl-planner-app .fpl-pp-flags { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin-top: 6px; min-height: 0; } .fpl-planner-app .fpl-chip { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; border: 1px solid; } .fpl-planner-app .fpl-chip.is-dgw { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 40%, transparent); color: var(--green); } .fpl-planner-app .fpl-chip.is-bgw { background: var(--gray-soft); border-color: var(--border-strong); color: var(--text-faint); } .fpl-planner-app .fpl-chip.is-inj { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 45%, transparent); color: var(--red); } .fpl-planner-app .fpl-chip.is-doubt { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 45%, transparent); color: var(--amber); } .fpl-planner-app .fpl-pp.is-injured { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); background: #1a1319; } .fpl-planner-app .fpl-pp.is-injured .fpl-pp-name { color: color-mix(in srgb, var(--red) 40%, var(--text)); } .fpl-planner-app .fpl-pp.is-doubtful { border-color: color-mix(in srgb, var(--amber) 42%, var(--border)); background: #1a1710; } .fpl-planner-app .fpl-pp.is-blank { opacity: 0.72; } /* IN / OUT on the recommended view: one corner ribbon, nothing else, so the pitch does not turn into a colour chart. */ .fpl-planner-app .fpl-pp-move { position: absolute; top: -8px; left: -6px; z-index: 2; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 5px; border: 1px solid; } .fpl-planner-app .fpl-pp-move.is-in { background: var(--green-fill); border-color: #1c9a6d; color: #fff; } .fpl-planner-app .fpl-pp-move.is-out { background: #7a2233; border-color: #a13148; color: #fff; } .fpl-planner-app .fpl-pp.is-moving-in { border-color: color-mix(in srgb, var(--green) 55%, var(--border)); } .fpl-planner-app .fpl-pp.is-moving-out { opacity: 0.55; } .fpl-planner-app .fpl-pitch-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--text-faint); } .fpl-planner-app .fpl-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: baseline; } /* ---------------------------------------------------------------- why */ .fpl-planner-app .fpl-disclosure { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); margin-bottom: 16px; } .fpl-planner-app .fpl-disclosure > summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); border-radius: var(--radius); transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .fpl-planner-app .fpl-disclosure > summary:hover { color: var(--text); background: rgba(231, 237, 247, 0.025); } .fpl-planner-app .fpl-disclosure[open] > summary { border-radius: var(--radius) var(--radius) 0 0; } .fpl-planner-app .fpl-disclosure > summary::-webkit-details-marker { display: none; } .fpl-planner-app .fpl-disclosure > summary::after { content: "\002B"; color: var(--text-faint); font-size: 15px; } .fpl-planner-app .fpl-disclosure[open] > summary::after { content: "\2212"; } .fpl-planner-app .fpl-disclosure[open] > summary { border-bottom: 1px solid var(--border-soft); } .fpl-planner-app .fpl-disclosure-body { padding: 18px; } .fpl-planner-app .fpl-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .fpl-planner-app .fpl-reasons li { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; color: var(--text-dim); line-height: 1.55; } .fpl-planner-app .fpl-reasons li:last-child { border-bottom: 0; padding-bottom: 0; } .fpl-planner-app .fpl-reason-text { max-width: 78ch; min-width: 0; } .fpl-planner-app .fpl-reason-v { color: var(--text); font-weight: 650; white-space: nowrap; } /* The numbers inside an engine sentence: brighter and heavier than the prose around them, so a scan lands on the facts. Never a colour of its own - it is emphasis, not status. */ .fpl-planner-app .fpl-em { color: var(--text); font-weight: 650; } /* Section header inside a panel: accent tick + uppercase label (+ optional pill). One shape wherever a panel subdivides. */ .fpl-planner-app .fpl-subhead { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin: 22px 0 11px; } .fpl-planner-app .fpl-subhead::before { content: ""; flex: 0 0 3px; width: 3px; height: 12px; border-radius: 2px; background: var(--accent); opacity: 0.85; } .fpl-planner-app .fpl-subhead:first-child { margin-top: 0; } /* Grouped subsections inside "Why this plan?": each header + list is one unit, separated from the next by a hairline and real space. */ .fpl-planner-app .fpl-why-group .fpl-subhead { margin: 0 0 11px; } .fpl-planner-app .fpl-why-group + .fpl-why-group { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); } /* Verdict rows under "How sure is this?": a leading dot ties each sentence to its verdict, the trailing tag names it in the header's words. */ .fpl-planner-app .fpl-reasons.is-verdicts li.fpl-conf-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; justify-content: normal; } .fpl-planner-app .fpl-conf-dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; transform: translateY(1px); } .fpl-planner-app .fpl-conf-row.is-for .fpl-conf-dot { background: var(--green); } .fpl-planner-app .fpl-conf-row.is-against .fpl-conf-dot { background: var(--amber); } /* The confidence band as a standalone pill (on the "How sure is this?" header). Same tones as the hero strip. */ .fpl-planner-app .fpl-conf-pill.is-high, .fpl-planner-app .fpl-conf-pill.is-moderate, .fpl-planner-app .fpl-conf-pill.is-low { padding: 3px 9px; border-radius: 999px; border: 1px solid; } .fpl-planner-app .fpl-conf-pill.is-high { color: var(--green); background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 34%, transparent); } .fpl-planner-app .fpl-conf-pill.is-moderate { color: var(--amber); background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 36%, transparent); } .fpl-planner-app .fpl-conf-pill.is-low { color: var(--red); background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 36%, transparent); } .fpl-planner-app .fpl-whynot-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; } .fpl-planner-app .fpl-whynot-picker { flex: 1 1 280px; min-width: 0; } .fpl-planner-app .fpl-whynot-out { margin-top: 12px; padding: 16px 17px; background: var(--bg-sunk); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); } .fpl-planner-app .fpl-whynot-text { font-size: 14.5px; line-height: 1.6; } .fpl-planner-app .fpl-blockers { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } /* Block flow with an absolute bullet, NOT flex: a sentence here is several inline nodes once its numbers are emphasized, and flex `gap` would wedge space between every fragment. */ .fpl-planner-app .fpl-blockers li { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; position: relative; padding-left: 15px; } .fpl-planner-app .fpl-blockers li::before { content: "\2022"; position: absolute; left: 2px; color: var(--text-faint); } /* Evidence bullets read quieter than the comparison above them; their numbers stay only slightly raised. */ .fpl-planner-app .fpl-whynot-evidence { margin-top: 14px; padding: 2px 0 2px 13px; border-left: 2px solid var(--border); } .fpl-planner-app .fpl-whynot-evidence .fpl-em { color: var(--text-dim); font-weight: 650; } /* the answer: a verdict tag, the comparison table, the working, the result */ .fpl-planner-app .fpl-whynot-head { display: flex; gap: 8px 10px; align-items: baseline; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border-soft); } .fpl-planner-app .fpl-whynot-verdict { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--gray-soft); border: 1px solid var(--border-strong); color: var(--text-dim); } .fpl-planner-app .fpl-whynot-verdict.is-better { background: var(--green-soft); border-color: var(--green); color: var(--green); } .fpl-planner-app .fpl-whynot-verdict.is-level { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); } .fpl-planner-app .fpl-whynot-verdict.is-impossible { background: var(--red-soft); border-color: var(--red); color: var(--red); } .fpl-planner-app .fpl-whynot-head .fpl-whynot-text { flex: 1 1 220px; min-width: 0; font-weight: 650; font-size: 15px; } /* The comparison: quiet uppercase labels against readable values, generous row rhythm, long values (knock-on changes) free to wrap. */ .fpl-planner-app .fpl-whynot-rows { display: grid; grid-template-columns: minmax(150px, auto) minmax(0, 1fr); gap: 10px 18px; margin: 0; } .fpl-planner-app .fpl-whynot-rows dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); padding-top: 3px; } .fpl-planner-app .fpl-whynot-rows dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); font-weight: 500; } .fpl-planner-app .fpl-whynot-rows dd .fpl-em { font-weight: 680; } /* The conclusion reads as one: a tinted strip with a directional mark. */ .fpl-planner-app .fpl-whynot-result { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; padding: 10px 13px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); font-size: 14px; font-weight: 600; line-height: 1.5; } .fpl-planner-app .fpl-whynot-result-mark { color: var(--accent); font-size: 13px; align-self: center; } .fpl-planner-app .fpl-whynot-result .fpl-em { font-weight: 700; } .fpl-planner-app .fpl-whynot-alts { margin-top: 12px; } /* The alternatives card next door pairs a headline with a two-word delta, so .fpl-alt-delta is `white-space: nowrap` there. A route reads as a whole sentence ("Projects 9.4 points below the recommended plan."), which that nowrap pushed straight off a 390px screen and gave the page a horizontal scrollbar. Overridden here only, so the other card keeps its tight line. */ .fpl-planner-app .fpl-whynot-alts .fpl-alt-title { flex: 1 1 220px; min-width: 0; } .fpl-planner-app .fpl-whynot-alts .fpl-alt-delta { white-space: normal; min-width: 0; } /* ----------------------------------------------------------- combobox */ /* A searchable player picker. The popup is absolutely positioned so opening it never reflows the card underneath, and the wrapper owns the stacking context so the list paints over the disclosure body rather than being clipped by it. */ .fpl-planner-app .fpl-cb { position: relative; } .fpl-planner-app .fpl-cb-input { width: 100%; } .fpl-planner-app .fpl-cb-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; max-height: 320px; overflow-y: auto; /* A popup list, not a modal: the page stays scrollable while it is open, but reaching the list's end must not start scrolling the page. */ overscroll-behavior: contain; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .fpl-planner-app .fpl-cb-opt { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 6px; cursor: pointer; } .fpl-planner-app .fpl-cb-opt:hover { background: var(--bg-raised); } /* Focus never leaves the input, so the active row cannot rely on :focus. It carries its own high-contrast treatment plus a border, so the active option is still identifiable without colour. */ .fpl-planner-app .fpl-cb-opt.is-active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } .fpl-planner-app .fpl-cb-name { font-size: 14px; font-weight: 600; color: var(--text); } /* --text-dim, NOT --text-faint. A row is painted on three different surfaces here (the card, the hover raise, and the active row's accent tint) and --text-faint measured 3.82:1 on the active one, under the AA floor. This line carries the club, the position and the price, which are required information rather than decoration, so it takes the colour that clears 4.5 on all three. Measured with getComputedStyle against the composited background: 5.40 on the active row (#1d2c40), 6.01 hovered (#1b2331), 6.65 resting (#141a24). Hierarchy comes from size and weight instead of an unreadable colour. */ .fpl-planner-app .fpl-cb-meta { flex: 1 1 auto; font-size: 12px; color: var(--text-dim); } .fpl-planner-app .fpl-cb-trail { font-size: 12.5px; font-weight: 650; color: var(--text-dim); font-variant-numeric: tabular-nums; } .fpl-planner-app .fpl-cb-empty { padding: 10px; font-size: 13px; color: var(--text-dim); } /* Announced, not shown: the result count exists for screen readers. Clipped rather than display:none, which would remove it from the accessibility tree and silence it. */ .fpl-planner-app .fpl-cb-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------------------------------------------------------------- future */ /* Sized by how many gameweeks there actually are. A fixed four-column grid left two thirds of the row empty on the default horizon of 3, which reads as a layout fault rather than as "there are two more gameweeks". */ .fpl-planner-app .fpl-future { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; } .fpl-planner-app .fpl-gw-col { background: var(--bg-sunk); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px; min-width: 0; } .fpl-planner-app .fpl-gw-col-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .fpl-planner-app .fpl-gw-col-gw { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .fpl-planner-app .fpl-gw-col-xp { font-size: 13px; font-weight: 650; color: var(--text); } .fpl-planner-app .fpl-gw-col-act { margin-top: 9px; font-size: 13.5px; font-weight: 600; } .fpl-planner-app .fpl-gw-col-det { margin-top: 4px; font-size: 12px; color: var(--text-faint); line-height: 1.5; } .fpl-planner-app .fpl-uncertain { margin-top: 12px; font-size: 12px; color: var(--text-faint); display: flex; gap: 7px; align-items: flex-start; } /* ---------------------------------------------------------------- alternatives */ .fpl-planner-app .fpl-alts { display: grid; gap: 8px; } .fpl-planner-app .fpl-alt { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 11px 13px; background: var(--bg-sunk); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); } .fpl-planner-app .fpl-alt-title { font-size: 14px; font-weight: 600; color: var(--text-dim); min-width: 0; } .fpl-planner-app .fpl-alt-delta { font-size: 13px; color: var(--text-faint); white-space: nowrap; } .fpl-planner-app .fpl-alt-delta b { color: var(--red); font-weight: 650; } /* ---------------------------------------------------------------- banners */ .fpl-planner-app .fpl-banner { display: flex; gap: 13px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); margin-bottom: 16px; } .fpl-planner-app .fpl-banner-body { flex: 1 1 auto; min-width: 0; } .fpl-planner-app .fpl-banner-title { font-size: 15px; font-weight: 650; } .fpl-planner-app .fpl-banner-text { margin-top: 4px; color: var(--text-dim); font-size: 13.5px; line-height: 1.6; } .fpl-planner-app .fpl-banner-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; border: 1px solid var(--border-strong); background: var(--bg-raised); color: var(--text-dim); } .fpl-planner-app .fpl-banner.is-warn { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 36%, transparent); } .fpl-planner-app .fpl-banner.is-warn .fpl-banner-title { color: var(--amber); } .fpl-planner-app .fpl-banner.is-warn .fpl-banner-mark { color: var(--amber); background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 40%, transparent); } .fpl-planner-app .fpl-banner.is-error { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 36%, transparent); } .fpl-planner-app .fpl-banner.is-error .fpl-banner-title { color: var(--red); } .fpl-planner-app .fpl-banner.is-error .fpl-banner-mark { color: var(--red); background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 40%, transparent); } .fpl-planner-app .fpl-banner.is-info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 32%, transparent); } .fpl-planner-app .fpl-banner.is-info .fpl-banner-title { color: var(--accent); } .fpl-planner-app .fpl-banner.is-info .fpl-banner-mark { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 36%, transparent); } .fpl-planner-app .fpl-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; } /* "What changed": the previous recommendation, the current one, and the fields that moved between them. A definition list because that is what it is. */ .fpl-planner-app .fpl-change-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 9px 0 0; } .fpl-planner-app .fpl-change-rows dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); padding-top: 2px; } .fpl-planner-app .fpl-change-rows dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); min-width: 0; } .fpl-planner-app .fpl-change-rows dd.is-now { color: var(--text); font-weight: 600; } /* The other half of the same answer: nothing moved. One quiet line, because a full banner every time a resync changed nothing is noise. */ .fpl-planner-app .fpl-unchanged { display: flex; gap: 9px; align-items: baseline; margin-bottom: 16px; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-sunk); font-size: 13px; line-height: 1.5; color: var(--text-dim); } .fpl-planner-app .fpl-unchanged b { color: var(--text); font-weight: 650; } .fpl-planner-app .fpl-unchanged-mark { color: var(--green); font-weight: 700; } .fpl-planner-app .fpl-missing { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 5px; font-size: 13px; color: var(--text-dim); } .fpl-planner-app .fpl-missing li::before { content: "\2022"; color: var(--text-faint); margin-right: 8px; } /* ---------------------------------------------------------------- progress */ .fpl-planner-app .fpl-progress { max-width: 560px; margin: 44px auto; padding: 26px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); } .fpl-planner-app .fpl-progress-title { font-size: 19px; font-weight: 650; } .fpl-planner-app .fpl-progress-sub { margin-top: 5px; color: var(--text-faint); font-size: 13px; } .fpl-planner-app .fpl-bar { height: 4px; border-radius: 3px; background: var(--bg-sunk); border: 1px solid var(--border-soft); overflow: hidden; margin: 18px 0 20px; } .fpl-planner-app .fpl-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-fill), #4b86e6); width: 0; transition: width 0.35s ease; position: relative; overflow: hidden; } /* a soft sheen moving along the filled part, so a stage that takes a while still reads as alive */ .fpl-planner-app .fpl-bar-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: translateX(-100%); animation: fpl-sheen 1.6s var(--ease) infinite; } @keyframes fpl-sheen { to { transform: translateX(100%); } } .fpl-planner-app .fpl-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .fpl-planner-app .fpl-stage { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-faint); } .fpl-planner-app .fpl-stage-dot { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-sunk); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-faint); } .fpl-planner-app .fpl-stage.is-active { color: var(--text); } .fpl-planner-app .fpl-stage.is-active .fpl-stage-dot { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); position: relative; } /* a slim orbiting arc on the active stage */ .fpl-planner-app .fpl-stage.is-active .fpl-stage-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); animation: fpl-spin 0.9s linear infinite; } @keyframes fpl-spin { to { transform: rotate(360deg); } } .fpl-planner-app .fpl-stage.is-done { color: var(--text-dim); } .fpl-planner-app .fpl-stage.is-done .fpl-stage-dot { border-color: color-mix(in srgb, var(--green) 50%, transparent); background: var(--green-soft); color: var(--green); } /* ---------------------------------------------------------------- tables */ .fpl-planner-app .fpl-table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-sunk); } .fpl-planner-app table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .fpl-planner-app th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); padding: 10px 14px 9px; white-space: nowrap; border-bottom: 1px solid var(--border); background: var(--bg-sunk); position: sticky; top: 0; z-index: 1; } .fpl-planner-app td { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text-dim); white-space: nowrap; } .fpl-planner-app th.is-num, .fpl-planner-app td.is-num { text-align: right; font-variant-numeric: tabular-nums; } .fpl-planner-app td.is-bad { color: var(--red); } .fpl-planner-app td.is-rec { max-width: 380px; overflow: hidden; text-overflow: ellipsis; } .fpl-planner-app td.is-strong { color: var(--text); font-weight: 600; } .fpl-planner-app tbody tr { transition: background-color var(--t-fast) var(--ease); } .fpl-planner-app tbody tr:nth-child(even) { background: rgba(231, 237, 247, 0.015); } .fpl-planner-app tbody tr:hover { background: rgba(90, 162, 255, 0.055); } .fpl-planner-app tr:last-child td { border-bottom: 0; } .fpl-planner-app .fpl-gw-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--bg-raised); border: 1px solid var(--border); color: var(--text); font-size: 12px; font-weight: 650; white-space: nowrap; } .fpl-planner-app .fpl-chip.is-chip-played { background: var(--violet-soft); border-color: color-mix(in srgb, var(--violet) 40%, transparent); color: var(--violet); font-size: 10.5px; padding: 2px 7px; } /* ---------------------------------------------------------------- status */ /* The status grid: each fact is a label over a value with a hairline lead-in, so the panel reads as a dashboard of small facts rather than loose text. */ .fpl-planner-app .fpl-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; } .fpl-planner-app .fpl-kv > div { padding-left: 10px; border-left: 2px solid var(--border-soft); min-width: 0; } .fpl-planner-app .fpl-kv-k { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); } .fpl-planner-app .fpl-kv-v { margin-top: 3px; font-size: 14.5px; font-weight: 650; overflow-wrap: break-word; } /* One long sentence in a grid of short facts: full row, secondary prose. */ .fpl-planner-app .fpl-kv > .fpl-kv-wide { grid-column: 1 / -1; } .fpl-planner-app .fpl-kv-muted .fpl-kv-v { font-size: 13px; font-weight: 450; color: var(--text-dim); line-height: 1.6; max-width: 78ch; } .fpl-planner-app .fpl-status-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; border: 1px solid; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; } .fpl-planner-app .fpl-status-pill.is-good { color: var(--green); background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 34%, transparent); } .fpl-planner-app .fpl-status-pill.is-bad { color: var(--red); background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 36%, transparent); } /* Sources: name beside its health dot, freshness right-aligned in figures. */ .fpl-planner-app .fpl-src-list { background: var(--bg-sunk); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 2px 12px; } .fpl-planner-app .fpl-src { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); font-weight: 550; padding: 9px 0; border-bottom: 1px solid var(--border-soft); } .fpl-planner-app .fpl-src:last-child { border-bottom: 0; } .fpl-planner-app .fpl-src-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .fpl-planner-app .fpl-src.is-bad .fpl-src-dot { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); } .fpl-planner-app .fpl-src.is-stale .fpl-src-dot { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); } .fpl-planner-app .fpl-src-age { margin-left: auto; color: var(--text-faint); font-size: 12px; font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Closing explanatory copy: clearly secondary to the facts above it. No divider - the smaller, fainter type and the space above carry the distinction; a readable measure keeps it from sprawling. */ .fpl-planner-app .fpl-footnote { margin-top: 20px; font-size: 12.5px; line-height: 1.6; color: var(--text-faint); max-width: 82ch; } .fpl-planner-app .fpl-freshness { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; font-size: 12.5px; color: var(--text-faint); } .fpl-planner-app .fpl-freshness b { color: var(--text-dim); font-weight: 600; } /* ---------------------------------------------------------------- settings */ .fpl-planner-app .fpl-setting { padding: 16px 18px; border-bottom: 1px solid var(--border-soft); } .fpl-planner-app .fpl-setting:last-child { border-bottom: 0; } .fpl-planner-app .fpl-setting-title { font-size: 15px; font-weight: 650; } .fpl-planner-app .fpl-setting-text { margin-top: 5px; color: var(--text-dim); font-size: 13.5px; line-height: 1.65; max-width: 68ch; } .fpl-planner-app .fpl-setting-actions { margin-top: 12px; display: flex; gap: 9px; flex-wrap: wrap; align-items: center; } .fpl-planner-app .fpl-setting-status { font-size: 12.5px; color: var(--text-faint); } .fpl-planner-app .fpl-danger-zone { border-color: color-mix(in srgb, var(--red) 26%, var(--border)); } .fpl-planner-app .fpl-danger-zone .fpl-card-head h3 { color: var(--red); } .fpl-planner-app .fpl-confirm { margin-top: 12px; padding: 13px 14px; background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); border-radius: var(--radius-sm); } .fpl-planner-app .fpl-confirm-text { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); } .fpl-planner-app .fpl-confirm-text b { color: var(--text); } .fpl-planner-app .fpl-opt-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .fpl-planner-app .fpl-opt { flex: 1 1 190px; min-width: 0; } /* ---------------------------------------------------------------- pre-season */ .fpl-planner-app .fpl-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .fpl-planner-app .fpl-choice { background: var(--bg-sunk); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 9px; } .fpl-planner-app .fpl-choice h4 { font-size: 16px; } .fpl-planner-app .fpl-choice p { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; flex: 1 1 auto; } .fpl-planner-app .fpl-choice button { align-self: flex-start; } .fpl-planner-app .fpl-counters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .fpl-planner-app .fpl-counter { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-sunk); border: 1px solid var(--border-soft); min-width: 84px; } .fpl-planner-app .fpl-counter-k { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); } .fpl-planner-app .fpl-counter-v { font-size: 15px; font-weight: 650; margin-top: 2px; } .fpl-planner-app .fpl-counter.is-full { border-color: color-mix(in srgb, var(--green) 42%, transparent); } .fpl-planner-app .fpl-counter.is-full .fpl-counter-v { color: var(--green); } .fpl-planner-app .fpl-counter.is-over { border-color: color-mix(in srgb, var(--red) 45%, transparent); } .fpl-planner-app .fpl-counter.is-over .fpl-counter-v { color: var(--red); } .fpl-planner-app .fpl-legality { margin-bottom: 14px; } .fpl-planner-app .fpl-legality-ok { color: var(--green); font-size: 13.5px; font-weight: 600; } .fpl-planner-app .fpl-legality-bad { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; color: color-mix(in srgb, var(--red) 62%, var(--text)); } .fpl-planner-app .fpl-search-results { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); margin-top: 12px; } .fpl-planner-app .fpl-sr { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); } .fpl-planner-app .fpl-sr:last-child { border-bottom: 0; } .fpl-planner-app .fpl-sr-main { flex: 1 1 auto; min-width: 0; } .fpl-planner-app .fpl-sr-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fpl-planner-app .fpl-sr-meta { font-size: 12px; color: var(--text-faint); } .fpl-planner-app .fpl-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .fpl-planner-app .fpl-picked-item { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 6px; background: var(--bg-raised); border: 1px solid var(--border); font-size: 12.5px; } /* ------------------------------------------------------------------ charts */ /* Shared: a chart never speaks alone; the numbers it draws are printed nearby. Marks carry the accent hue; every label wears a text token. */ .fpl-planner-app .fpl-chart-block { margin-top: 16px; } .fpl-planner-app .fpl-chart-block.is-first { margin-top: 0; margin-bottom: 16px; } .fpl-planner-app .fpl-chart-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; } .fpl-planner-app .fpl-chart-sub { font-size: 12.5px; color: var(--text-faint); margin-bottom: 8px; } /* tooltips: one per mark, shown on hover or keyboard focus */ .fpl-planner-app .fpl-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(2px); display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 7px; background: var(--bg-raised); border: 1px solid var(--border-strong); box-shadow: var(--shadow); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); z-index: 20; } .fpl-planner-app .fpl-tip-t { font-size: 12px; font-weight: 650; color: var(--text); } .fpl-planner-app .fpl-tip-b { font-size: 11.5px; color: var(--text-dim); white-space: normal; max-width: 220px; } .fpl-planner-app .fpl-col:hover .fpl-tip, .fpl-planner-app .fpl-col:focus-visible .fpl-tip, .fpl-planner-app .fpl-dot-hit:hover .fpl-tip, .fpl-planner-app .fpl-dot-hit:focus-visible .fpl-tip { opacity: 1; transform: translateX(-50%) translateY(0); } /* the first and last marks would clip their tooltip at the card edge */ .fpl-planner-app .fpl-col:first-child .fpl-tip { left: 0; transform: translateX(0) translateY(2px); } .fpl-planner-app .fpl-col:first-child:hover .fpl-tip, .fpl-planner-app .fpl-col:first-child:focus-visible .fpl-tip { transform: translateX(0) translateY(0); } .fpl-planner-app .fpl-col:last-child .fpl-tip { left: auto; right: 0; transform: translateX(0) translateY(2px); } .fpl-planner-app .fpl-col:last-child:hover .fpl-tip, .fpl-planner-app .fpl-col:last-child:focus-visible .fpl-tip { transform: translateX(0) translateY(0); } /* column chart */ .fpl-planner-app .fpl-chart-cols { display: flex; align-items: stretch; gap: 6px; min-height: 150px; } .fpl-planner-app .fpl-chart-cols.is-dense { gap: 2px; } .fpl-planner-app .fpl-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 6px; } .fpl-planner-app .fpl-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .fpl-planner-app .fpl-col-cap { font-size: 11px; font-weight: 650; color: var(--text-dim); white-space: nowrap; } .fpl-planner-app .fpl-col-track { flex: 1 1 auto; width: 100%; max-width: 26px; display: flex; align-items: flex-end; min-height: 84px; } .fpl-planner-app .fpl-col-fill { width: 100%; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--accent) 52%, var(--bg-raised)); transition: background-color var(--t-fast) var(--ease); min-height: 2px; } .fpl-planner-app .fpl-col:hover .fpl-col-fill { background: color-mix(in srgb, var(--accent) 72%, var(--bg-raised)); } .fpl-planner-app .fpl-col.is-active .fpl-col-fill { background: var(--accent); } .fpl-planner-app .fpl-col.is-muted .fpl-col-fill { background: var(--bg-raised); } .fpl-planner-app .fpl-col-x { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; } .fpl-planner-app .fpl-chart-cols.is-dense .fpl-col-x.is-quiet { visibility: hidden; } .fpl-planner-app .fpl-chart-cols.is-dense .fpl-col-cap { font-size: 10px; } /* trend line */ .fpl-planner-app .fpl-chart-line { padding-top: 6px; } .fpl-planner-app .fpl-line-plot { position: relative; height: 150px; margin-right: 44px; } .fpl-planner-app .fpl-line-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; } .fpl-planner-app .fpl-line-gridrow { position: relative; border-top: 1px solid var(--border-soft); height: 0; } .fpl-planner-app .fpl-line-tick { position: absolute; right: -44px; top: -7px; font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .fpl-planner-app .fpl-line-svg { position: absolute; inset: 0; display: block; } .fpl-planner-app .fpl-line-svg svg { width: 100%; height: 100%; display: block; overflow: visible; } .fpl-planner-app .fpl-line-path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .fpl-planner-app .fpl-line-area { fill: rgba(90, 162, 255, 0.09); stroke: none; } .fpl-planner-app .fpl-dot-hit { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; min-height: 0; padding: 0; border-radius: 50%; cursor: pointer; box-shadow: none; } .fpl-planner-app .fpl-dot-hit:hover { background: transparent; } .fpl-planner-app .fpl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-card); opacity: 0; transition: opacity var(--t-fast) var(--ease); } .fpl-planner-app .fpl-dot-hit:hover .fpl-dot, .fpl-planner-app .fpl-dot-hit:focus-visible .fpl-dot, .fpl-planner-app .fpl-dot-hit.is-end .fpl-dot { opacity: 1; } .fpl-planner-app .fpl-dot.is-static { position: absolute; margin: -4px 0 0 -4px; opacity: 1; } .fpl-planner-app .fpl-line-endlabel { position: absolute; right: -44px; margin-top: -24px; font-size: 11.5px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; /* Sits in the tick gutter, so it masks whichever tick it lands on. */ background: var(--bg-card); padding: 1px 4px; border-radius: 4px; z-index: 2; } .fpl-planner-app .fpl-line-x { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: var(--text-faint); } /* sparkline */ .fpl-planner-app .fpl-spark { position: relative; display: block; width: 100%; margin: 6px 0 10px; } .fpl-planner-app .fpl-spark .fpl-line-svg { position: absolute; inset: 2px 4px; } /* ------------------------------------------------------------------- tiles */ .fpl-planner-app .fpl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; margin-bottom: 4px; } .fpl-planner-app .fpl-tile { background: var(--bg-sunk); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 14px; min-width: 0; transition: border-color var(--t-fast) var(--ease); } .fpl-planner-app .fpl-tile:hover { border-color: var(--border-strong); } .fpl-planner-app .fpl-tile-v { margin-top: 4px; font-size: 20px; font-weight: 680; letter-spacing: -0.015em; } /* ------------------------------------------------------------ squad table */ .fpl-planner-app .fpl-squad-table td.is-role { width: 34px; padding-right: 4px; } .fpl-planner-app .fpl-squad-table td.is-name { display: flex; align-items: center; gap: 8px; } .fpl-planner-app .fpl-pos-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; } .fpl-planner-app .fpl-pos-dot.pos-1 { background: var(--amber); } .fpl-planner-app .fpl-pos-dot.pos-2 { background: var(--accent); } .fpl-planner-app .fpl-pos-dot.pos-3 { background: var(--green); } .fpl-planner-app .fpl-pos-dot.pos-4 { background: var(--violet); } .fpl-planner-app .fpl-pp-arm.is-inline, .fpl-planner-app .fpl-pp-move.is-inline { position: static; display: inline-flex; align-items: center; justify-content: center; } .fpl-planner-app .fpl-pp-move.is-inline { margin-left: 2px; } .fpl-planner-app .fpl-role-bench { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 4px; border-radius: 999px; background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-faint); font-size: 10px; font-weight: 700; } .fpl-planner-app .fpl-squad-table tr.is-bench td { color: var(--text-faint); } .fpl-planner-app .fpl-squad-table tr.is-bench td.is-strong { color: var(--text-dim); } .fpl-planner-app .fpl-squad-table tr.is-clickable { cursor: pointer; } .fpl-planner-app .fpl-squad-table tr.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .fpl-planner-app .fpl-squad-table td.is-blank-fix { color: var(--text-faint); font-style: italic; } .fpl-planner-app th.is-sortable { padding: 0; } .fpl-planner-app .fpl-sort-btn { background: transparent; border: 0; min-height: 0; box-shadow: none; padding: 10px 14px 9px; width: 100%; justify-content: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; border-radius: 0; gap: 6px; } .fpl-planner-app th.is-num .fpl-sort-btn { justify-content: flex-end; } .fpl-planner-app .fpl-sort-btn:hover { background: rgba(90, 162, 255, 0.07); border: 0; } .fpl-planner-app .fpl-sort-icon { font-size: 9px; opacity: 0.6; } .fpl-planner-app th[aria-sort="ascending"] .fpl-sort-icon, .fpl-planner-app th[aria-sort="descending"] .fpl-sort-icon { opacity: 1; color: var(--accent); } /* ----------------------------------------------------------- player drawer */ /* Above the shared site chrome: the header sits at z-index 10001 and the sync modals at 10002-10003 (assets/css/main.css), so a modal drawer the user just opened has to clear all of them or its own title renders underneath the fixed header. */ .fpl-planner-app .fpl-dw-overlay { position: fixed; inset: 0; z-index: 10010; } .fpl-planner-app .fpl-dw-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 10, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: fpl-fade-in var(--t-fast) var(--ease); } .fpl-planner-app .fpl-dw { position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 94vw); overflow-y: auto; /* The page is scroll-locked while the drawer is open (ui/scroll-lock.js); this stops momentum/touch scrolling from chaining past the drawer's own top and bottom as well. */ overscroll-behavior: contain; background: var(--bg-soft); border-left: 1px solid var(--border); box-shadow: var(--shadow-pop); padding: 20px 22px 28px; animation: fpl-slide-in var(--t-slow) var(--ease); } @keyframes fpl-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fpl-slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } } .fpl-planner-app .fpl-dw-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; justify-content: center; } .fpl-planner-app .fpl-dw-head { display: flex; gap: 13px; align-items: flex-start; padding-right: 40px; } .fpl-planner-app .fpl-dw-posband { width: 4px; align-self: stretch; border-radius: 3px; background: var(--border-strong); } .fpl-planner-app .fpl-dw-posband.pos-1 { background: var(--amber); } .fpl-planner-app .fpl-dw-posband.pos-2 { background: var(--accent); } .fpl-planner-app .fpl-dw-posband.pos-3 { background: var(--green); } .fpl-planner-app .fpl-dw-posband.pos-4 { background: var(--violet); } .fpl-planner-app .fpl-dw-title h3 { font-size: 21px; letter-spacing: -0.02em; } .fpl-planner-app .fpl-dw-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; color: var(--text-dim); font-size: 13.5px; } .fpl-planner-app .fpl-dw-news { margin-top: 14px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent); font-size: 13px; line-height: 1.55; color: var(--text-dim); } .fpl-planner-app .fpl-dw-section { margin-top: 20px; } .fpl-planner-app .fpl-dw-gws { display: grid; gap: 6px; } .fpl-planner-app .fpl-dw-gw { display: flex; align-items: baseline; gap: 10px; padding: 8px 11px; background: var(--bg-sunk); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); font-size: 13px; } .fpl-planner-app .fpl-dw-gw.is-blank { opacity: 0.65; } .fpl-planner-app .fpl-dw-gw-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); flex: 0 0 44px; } .fpl-planner-app .fpl-dw-gw-v { font-weight: 650; color: var(--text); flex: 0 0 auto; } .fpl-planner-app .fpl-dw-gw-f { color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; } .fpl-planner-app .fpl-dw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; } .fpl-planner-app .fpl-dw-stat { background: var(--bg-sunk); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 9px 11px; min-width: 0; } .fpl-planner-app .fpl-dw-stat-v { font-size: 15px; font-weight: 650; margin-top: 2px; } .fpl-planner-app .fpl-dw-breakdown { display: grid; gap: 5px; } .fpl-planner-app .fpl-dw-bd-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 38px; align-items: center; gap: 10px; font-size: 12px; } .fpl-planner-app .fpl-dw-bd-k { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fpl-planner-app .fpl-dw-bd-track { height: 6px; border-radius: 4px; background: var(--bg-sunk); border: 1px solid var(--border-soft); overflow: hidden; display: block; } .fpl-planner-app .fpl-dw-bd-fill { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--accent) 55%, var(--bg-raised)); } .fpl-planner-app .fpl-dw-bd-fill.is-neg { background: color-mix(in srgb, var(--red) 55%, var(--bg-raised)); } .fpl-planner-app .fpl-dw-bd-v { text-align: right; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; } .fpl-planner-app .fpl-dw-bd-v.is-neg { color: var(--red); } /* ------------------------------------------------------------ empty states */ .fpl-planner-app .fpl-empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 16px; text-align: center; } .fpl-planner-app .fpl-empty-mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-sunk); border: 1px solid var(--border); color: var(--text-faint); font-size: 17px; } /* segmented icon toggles (pitch / list) */ .fpl-planner-app .fpl-seg-icons > button { padding: 6px 11px; } /* ---------------------------------------------------------------- responsive */ @media (max-width: 900px) { .fpl-planner-app .fpl-choices { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .fpl-planner-app .fpl-main { padding: 18px 13px 60px; } .fpl-planner-app .fpl-landing-head { padding-top: 20px; } .fpl-planner-app .fpl-landing h1 { font-size: 34px; } .fpl-planner-app .fpl-lede { font-size: 15.5px; } .fpl-planner-app .fpl-onboard { padding: 16px; } .fpl-planner-app .fpl-onboard-row { flex-direction: column; } .fpl-planner-app .fpl-onboard-row button { width: 100%; } /* The full identity + stats + tabs block is too tall to pin on a phone; it scrolls with the page there. */ .fpl-planner-app .fpl-topbar { position: static; gap: 10px 14px; margin: 0 -13px 14px; padding: 10px 13px; } .fpl-planner-app .fpl-idstats { margin-left: 0; gap: 14px; width: 100%; } .fpl-planner-app .fpl-stat-v { font-size: 14px; } .fpl-planner-app .fpl-tabs { width: 100%; } .fpl-planner-app .fpl-tabs > button { flex: 1 1 0; padding: 6px 4px; } /* Touch targets: the compact desktop sizes (34px) are below the 40px a finger needs, so every small control grows on a phone. */ .fpl-planner-app .fpl-seg > button, .fpl-planner-app .fpl-btn-sm { min-height: 40px; } .fpl-planner-app .fpl-hero { padding: 15px 15px 14px; } .fpl-planner-app .fpl-hero-headline { font-size: 24px; margin-top: 11px; } .fpl-planner-app .fpl-hero-sub { font-size: 14px; } .fpl-planner-app .fpl-hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 13px; } .fpl-planner-app .fpl-fact { padding: 8px 8px; } .fpl-planner-app .fpl-fact-k { font-size: 9.5px; letter-spacing: 0.06em; } /* Three facts across a 390px screen leaves about 100px each, so the value wraps instead of being cut off by the desktop ellipsis. */ .fpl-planner-app .fpl-fact-v { font-size: 13.5px; white-space: normal; overflow: visible; line-height: 1.25; } .fpl-planner-app .fpl-fact-note { font-size: 11px; } .fpl-planner-app .fpl-card-body { padding: 14px; } .fpl-planner-app .fpl-card-head { padding: 12px 14px; } .fpl-planner-app .fpl-disclosure > summary { padding: 12px 14px; } .fpl-planner-app .fpl-disclosure-body { padding: 14px; } .fpl-planner-app .fpl-transfer { grid-template-columns: minmax(0, 1fr); gap: 8px; } .fpl-planner-app .fpl-tr-arrow { transform: rotate(90deg); padding: 0; } /* The picker takes the row and the Answer button sits under it full width: side by side at 390px left the button 60px wide with a clipped label. */ .fpl-planner-app .fpl-whynot-picker { flex: 1 1 100%; } .fpl-planner-app .fpl-whynot-row > button { width: 100%; } /* Label above value: two columns at 390px gave the value about 150px and wrapped "Tavernier to Palmer" onto three lines. */ .fpl-planner-app .fpl-whynot-rows { grid-template-columns: minmax(0, 1fr); gap: 3px; } .fpl-planner-app .fpl-whynot-rows dt { padding-top: 10px; } .fpl-planner-app .fpl-whynot-rows dt:first-child { padding-top: 0; } /* Verdict rows: the tag drops under its sentence, still tied by the dot. */ .fpl-planner-app .fpl-reasons.is-verdicts li.fpl-conf-row { grid-template-columns: 8px minmax(0, 1fr); } .fpl-planner-app .fpl-conf-row .fpl-conf-mark { grid-column: 2; justify-self: start; } .fpl-planner-app .fpl-cb-list { max-height: 260px; } .fpl-planner-app .fpl-cb-opt { padding: 9px 10px; } .fpl-planner-app .fpl-cb-name { flex: 1 1 100%; } .fpl-planner-app .fpl-pitch { padding: 12px 7px; gap: 9px; } .fpl-planner-app .fpl-row { gap: 5px; } .fpl-planner-app .fpl-bench-row { gap: 5px; } .fpl-planner-app .fpl-bench-slot { max-width: none; } .fpl-planner-app .fpl-pp { padding: 6px 4px 7px; max-width: none; } .fpl-planner-app .fpl-pp-name { font-size: 11.5px; } /* A five-across midfield row on a 390px screen leaves about 72px per card, which is not enough for "ARS · DEF · £8.0m" on one line, so the desktop ellipsis was silently eating the PRICE. Same treatment as .fpl-fact-v above: let it wrap rather than truncate, because the price is required information on a player card, not decoration. */ .fpl-planner-app .fpl-pp-meta { font-size: 9.5px; white-space: normal; overflow: visible; line-height: 1.25; } .fpl-planner-app .fpl-pp-fix { font-size: 10px; margin-top: 3px; } .fpl-planner-app .fpl-pp-xp { font-size: 12px; margin-top: 3px; } .fpl-planner-app .fpl-chip { font-size: 8.5px; padding: 1px 3px; } .fpl-planner-app .fpl-pp-arm { width: 18px; height: 18px; font-size: 10px; top: -7px; right: -4px; } .fpl-planner-app .fpl-pp-move { font-size: 8.5px; padding: 1px 4px; left: -4px; } .fpl-planner-app .fpl-progress { margin: 26px auto; padding: 18px; } .fpl-planner-app .fpl-conf { padding: 8px 10px; gap: 6px; margin-top: 12px; } .fpl-planner-app .fpl-conf-why { flex-basis: 100%; font-size: 12.5px; } .fpl-planner-app .fpl-change-rows { grid-template-columns: minmax(0, 1fr); gap: 2px; } .fpl-planner-app .fpl-change-rows dt { padding-top: 7px; } .fpl-planner-app .fpl-change-rows dt:first-child { padding-top: 0; } /* charts: shorter plots, quieter labels, and dense x axes hide their middle */ .fpl-planner-app .fpl-chart-cols { min-height: 118px; gap: 3px; } .fpl-planner-app .fpl-col-track { min-height: 62px; } .fpl-planner-app .fpl-col-cap { font-size: 9.5px; } .fpl-planner-app .fpl-col-x { font-size: 9px; } .fpl-planner-app .fpl-line-plot { height: 120px; margin-right: 38px; } .fpl-planner-app .fpl-line-tick, .fpl-planner-app .fpl-line-endlabel { right: -38px; font-size: 9.5px; } .fpl-planner-app .fpl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .fpl-planner-app .fpl-tile-v { font-size: 17px; } /* the drawer becomes a bottom sheet a thumb can reach */ .fpl-planner-app .fpl-dw { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 86vh; border-left: 0; border-top: 1px solid var(--border-strong); border-radius: 16px 16px 0 0; animation: fpl-rise-in var(--t-slow) var(--ease); padding: 18px 16px 26px; } .fpl-planner-app .fpl-dw-bd-row { grid-template-columns: 108px minmax(0, 1fr) 34px; gap: 8px; } } @keyframes fpl-rise-in { from { transform: translateY(36px); opacity: 0; } to { transform: none; opacity: 1; } } /* Motion is decoration here, never information: every animated surface also states its meaning in text, so removing motion loses nothing. */ @media (prefers-reduced-motion: reduce) { .fpl-planner-app *, .fpl-planner-app *::before, .fpl-planner-app *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Very narrow: five across still has to fit without clipping or scrolling. */ @media (max-width: 400px) { .fpl-planner-app .fpl-row { gap: 4px; } .fpl-planner-app .fpl-pp { padding: 5px 3px 6px; } .fpl-planner-app .fpl-pp-name { font-size: 11px; } .fpl-planner-app .fpl-pp-meta { font-size: 9px; } } /* ------------------------------------------------- main.css counter-pins --- assets/css/main.css paints EVERY button `color: #555 !important` and `:hover { color: #ce1b28 !important }`. Among !important declarations the more specific selector wins, so each interactive element re-declares its own colour with !important here. Checked with getComputedStyle, not by eye. */ .fpl-planner-app button { color: var(--text) !important; } .fpl-planner-app button:hover, .fpl-planner-app button:focus, .fpl-planner-app button:active { color: var(--text) !important; } .fpl-planner-app button:disabled { color: var(--text-faint) !important; } .fpl-planner-app .fpl-btn-primary, .fpl-planner-app .fpl-btn-primary:hover, .fpl-planner-app .fpl-btn-primary:focus, .fpl-planner-app .fpl-btn-primary:active { color: #ffffff !important; } .fpl-planner-app .fpl-btn-quiet { color: var(--text-dim) !important; } .fpl-planner-app .fpl-btn-quiet:hover, .fpl-planner-app .fpl-btn-quiet:focus, .fpl-planner-app .fpl-btn-quiet:active { color: var(--text) !important; } .fpl-planner-app .fpl-btn-danger { color: color-mix(in srgb, var(--red) 74%, var(--text-dim)) !important; } .fpl-planner-app .fpl-btn-danger:hover, .fpl-planner-app .fpl-btn-danger:focus, .fpl-planner-app .fpl-btn-danger:active { color: var(--red) !important; } .fpl-planner-app .fpl-seg > button { color: var(--text-dim) !important; } .fpl-planner-app .fpl-seg > button:hover { color: var(--text) !important; } .fpl-planner-app .fpl-seg > button.is-on, .fpl-planner-app .fpl-seg > button.is-on:hover, .fpl-planner-app .fpl-seg > button.is-on:focus, .fpl-planner-app .fpl-seg > button.is-on:active { color: #ffffff !important; } /* main.css also paints a RED FOCUS RING on text inputs: input[type="text"]:focus { border-color:#ce1b28; box-shadow:0 0 0 1px #ce1b28 } The border-color half was already beaten by `.fpl-planner-app input:focus` above, but the box-shadow half was not, so every focused field in this app carried a red hairline under its blue outline. Found with CSS.getMatchedStylesForNode while building the player combobox; equal specificity, so this wins on source order because styles.css loads after main.css. Scoped to the app wrapper, so shared chrome keeps its own focus. */ .fpl-planner-app input:focus, .fpl-planner-app select:focus, .fpl-planner-app textarea:focus { box-shadow: none; } /* main.css also flashes a translucent red background on press */ .fpl-planner-app button:hover:active { background-color: var(--bg-sunk); } .fpl-planner-app .fpl-btn-primary:hover:active { background-color: #1a52b4; } .fpl-planner-app .fpl-seg > button.is-on:hover:active { background-color: #2a6fe0; } .fpl-planner-app .fpl-btn-danger:hover:active { background-color: var(--red-soft); } /* The buttons introduced by the UI overhaul that must NOT read as buttons: table sort headers and chart dot hit-targets. Same counter-pin rules as above (more specific selector + !important beats main.css's), verified with computed styles. */ .fpl-planner-app .fpl-sort-btn { color: var(--text-faint) !important; } .fpl-planner-app .fpl-sort-btn:hover, .fpl-planner-app .fpl-sort-btn:focus, .fpl-planner-app .fpl-sort-btn:active { color: var(--text-dim) !important; background-color: rgba(90, 162, 255, 0.07); } .fpl-planner-app th[aria-sort="ascending"] .fpl-sort-btn, .fpl-planner-app th[aria-sort="descending"] .fpl-sort-btn { color: var(--text) !important; } .fpl-planner-app .fpl-dot-hit, .fpl-planner-app .fpl-dot-hit:hover, .fpl-planner-app .fpl-dot-hit:active { background-color: transparent; border: 0; }