/* The desktop app (js/desktop.js). Everything is scoped to body[data-device="desktop"] so the phone and iPad layouts never change. It speaks the touch app's visual language (styles.css + the theme variables): grey page, white panels, the theme accent, the rounded system font with 800-weight titles, 12–18px corners, tinted buttons that turn accent when chosen, small uppercase section labels, green/red results. Only the layout is desktop: a sidebar, wider tables, settings rows. */ body[data-device="desktop"] { --tint: color-mix(in srgb, var(--text) 8%, transparent); --tint-strong: color-mix(in srgb, var(--text) 12%, transparent); --hair: color-mix(in srgb, var(--text) 7%, transparent); --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); --win: #1f9d55; --loss: #d12a2a; height: auto; min-height: 100dvh; overflow: auto; user-select: text; background: var(--bg); } /* Only the desktop app, dialogs and notices show. */ body[data-device="desktop"] > :not(#desktop):not(dialog):not(.toast):not(script) { display: none !important; } #desktop { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100dvh; font-size: 16px; line-height: 1.4; } #desktop[hidden] { display: none; } #desktop :is(h1, h2, h3) { margin: 0; } #desktop :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } #desktop input, #desktop textarea { font: inherit; color: var(--text); background: var(--tint); border: 0; border-radius: 10px; padding: 8px 12px; } #desktop textarea { width: 100%; box-sizing: border-box; resize: vertical; } #desktop input:focus, #desktop textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; } /* Buttons, as in the app: tinted, rounded, bold; accent when chosen or primary. */ #desktop main button:not(.quiet):not(.season):not(.syncPill):not(.sort):not(.tab), #desktop .welcome button { min-height: 40px; padding: 0 16px; border-radius: 12px; background: var(--tint); font-weight: 700; } #desktop main button:not(.quiet):not(.season):not(.syncPill):not(.sort):not(.tab):hover { background: var(--tint-strong); } #desktop button.primary, #desktop .seg button.on { background: var(--accent) !important; color: var(--bg); } #desktop button.quiet { background: transparent; color: var(--accent); font-weight: 700; padding: 4px 8px; border-radius: 8px; } #desktop button.quiet:hover { background: var(--accent-soft); } #desktop button:disabled { opacity: 0.4; cursor: default; } #desktop .grow { flex: 1; } #desktop .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ---------------------------------------------------------------- sidebar */ #desktop aside { background: var(--panel); padding: 22px 14px 18px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100dvh; box-sizing: border-box; overflow: auto; border-right: 1px solid var(--hair); } #desktop aside .brand { font-size: 24px; font-weight: 800; padding: 0 10px 16px; } #desktop aside h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; } #desktop aside nav { display: flex; flex-direction: column; gap: 4px; } #desktop aside nav button { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 44px; padding: 0 12px; border-radius: 12px; background: transparent; font-size: 17px; font-weight: 700; } #desktop aside nav button:hover { background: var(--tint); } #desktop aside nav button.on { background: var(--accent); color: var(--bg); } #desktop aside nav.teams button.on { background: var(--accent-soft); color: var(--accent); } #desktop aside nav.sections { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); } #desktop aside .add { display: flex; gap: 2px; padding: 2px 4px; } #desktop aside .add button { background: transparent; color: var(--accent); font-size: 15px; font-weight: 700; padding: 6px 8px; border-radius: 8px; } #desktop aside .add button:hover { background: var(--accent-soft); } #desktop .ico { display: inline-flex; width: 20px; height: 20px; } #desktop .ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #desktop aside .foot { margin-top: auto; padding: 12px 10px 0; font-size: 14px; color: var(--muted); display: grid; gap: 6px; } #desktop aside .foot p { margin: 0; } #desktop aside .foot a { color: var(--accent); font-weight: 700; text-decoration: none; } #desktop aside .foot a:hover { text-decoration: underline; } #desktop aside .foot .signin { justify-self: start; min-height: 36px; padding: 0 14px; border-radius: 12px; background: var(--accent); color: var(--bg); font-weight: 700; } /* ---------------------------------------------------------------- page */ #desktop main { padding: 24px 40px 60px; min-width: 0; max-width: 1280px; box-sizing: border-box; } #desktop .topbar { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "where actions" "title actions"; align-items: end; gap: 2px 20px; margin-bottom: 20px; } #desktop .topbar .where { grid-area: where; display: flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 700; } #desktop .topbar .where .team::after { content: "/"; margin-left: 8px; opacity: 0.5; } #desktop .topbar .season { display: inline-flex; align-items: center; gap: 2px; background: transparent; padding: 2px 6px; border-radius: 8px; color: var(--accent); font-weight: 700; } #desktop .topbar .season:hover { background: var(--accent-soft); } #desktop .topbar .season .ico { width: 18px; height: 18px; } #desktop .topbar h1 { grid-area: title; font-size: 32px; font-weight: 800; line-height: 1.15; } #desktop .topbar .actions { grid-area: actions; display: flex; gap: 10px; align-items: center; } #desktop .syncPill { min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--tint); color: var(--muted); font-size: 14px; font-weight: 700; } #desktop .syncPill[data-kind="bad"] { background: color-mix(in srgb, var(--loss) 14%, transparent); color: var(--loss); } #desktop .notice { background: var(--panel); border-radius: 14px; padding: 12px 16px; margin: 0 0 16px; max-width: 72ch; color: var(--muted); } #desktop .empty { color: var(--muted); } #desktop .notice.guest { display: flex; align-items: center; gap: 16px; color: var(--text); max-width: 920px; } #desktop .notice.guest span { flex: 1; } /* ---------------------------------------------------------------- welcome */ #desktop .welcome { max-width: 60ch; margin: 14vh 0 0 8%; } #desktop .welcome h1 { font-size: 40px; font-weight: 800; line-height: 1.1; margin-bottom: 12px; } #desktop .welcome p { color: var(--muted); font-size: 18px; } #desktop .welcome .actions { display: flex; gap: 10px; margin-top: 22px; } #desktop .welcome button { min-height: 52px; font-size: 18px; } /* ---------------------------------------------------------------- scoreboard */ #desktop .scoreboard { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; background: var(--panel); border-radius: 18px; padding: 20px 26px; margin-bottom: 28px; } #desktop .scoreboard.empty { display: block; color: var(--muted); } #desktop .record { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; } #desktop .record .fig { display: grid; justify-items: center; } #desktop .record .fig b { font-size: 52px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } #desktop .record .fig span { font-size: 14px; color: var(--muted); font-weight: 700; } #desktop .record .fig.w b { color: var(--win); } #desktop .record .fig.l b { color: var(--loss); } #desktop .record .sep { width: 1px; align-self: stretch; background: var(--hair); } #desktop .record .gp { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; color: var(--muted); } #desktop .leaders { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; justify-self: end; min-width: 260px; } #desktop .leaders dt { color: var(--muted); } #desktop .leaders dd { margin: 0; display: flex; gap: 8px; align-items: baseline; font-weight: 700; } #desktop .leaders dd small { color: var(--muted); font-weight: 600; } /* ---------------------------------------------------------------- stats */ #desktop .group { margin-bottom: 28px; } #desktop .group > h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px 4px; } /* Three columns on a wide screen, two, then one. A table that doesn't fit its column spans two (or the full row) instead of scrolling — js/desktop.js fitStats() measures and sets .span2 / .spanall; dense flow fills the gaps. */ #desktop .tables { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 14px; align-items: start; } #desktop .stat.span2 { grid-column: span 2; } #desktop .stat.spanall { grid-column: 1 / -1; } @media (max-width: 1250px) { #desktop .tables { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { #desktop .tables { grid-template-columns: minmax(0, 1fr); } #desktop .stat:is(.span2, .spanall) { grid-column: auto; } } #desktop .stat { min-width: 0; overflow: hidden; background: var(--panel); border-radius: 18px; padding: 14px 16px 8px; } #desktop .stat > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } #desktop .stat h3 { font-size: 19px; font-weight: 800; } #desktop .stat .note { margin: 2px 0 6px; font-size: 14px; color: var(--muted); max-width: 60ch; } #desktop .stat .empty { margin: 8px 0 10px; font-size: 15px; } #desktop table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; } #desktop th, #desktop td { padding: 7px 8px; border-bottom: 1px solid var(--hair); text-align: left; white-space: nowrap; } #desktop thead th { font-size: 13px; font-weight: 700; color: var(--muted); } #desktop tbody tr:last-child > * { border-bottom: 0; } #desktop tbody th { font-weight: 600; } #desktop .num { text-align: right; } #desktop td.bar { position: relative; min-width: 90px; } #desktop td.bar::before { content: ""; position: absolute; right: 8px; top: 50%; height: 8px; transform: translateY(-50%); width: calc((100% - 44px) * var(--w)); background: var(--accent-soft); border-radius: 999px; } #desktop td.bar span { position: relative; font-weight: 800; } #desktop .stats .coming { color: var(--muted); font-size: 14px; max-width: 72ch; } #desktop .customize { background: var(--panel); border-radius: 18px; padding: 16px 20px; margin-bottom: 24px; max-width: 800px; } #desktop .customize p { margin: 0 0 8px; color: var(--muted); } #desktop .customize ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; } #desktop .customize li { display: flex; align-items: center; gap: 8px; padding: 3px 0; break-inside: avoid; } #desktop .customize li label { flex: 1; font-weight: 600; } #desktop .customize li .grp { color: var(--muted); font-size: 13px; } #desktop .customize li button { font-size: 13px; } /* ---------------------------------------------------------------- roster */ #desktop table.grid { background: var(--panel); border-radius: 18px; overflow: hidden; max-width: 920px; } #desktop table.grid :is(th, td) { padding: 8px 12px; } #desktop table.grid thead th { padding-top: 12px; } #desktop table.grid tbody tr:hover { background: color-mix(in srgb, var(--text) 3%, transparent); } #desktop table.grid tfoot td { border-top: 1px solid var(--hair); } #desktop table.grid input { background: transparent; padding: 5px 8px; border-radius: 8px; } #desktop table.grid input:hover { background: var(--tint); } #desktop table.grid input:focus { background: var(--tint); } #desktop table.grid input.num { width: 3.2em; text-align: right; } #desktop table.grid th input { width: 16em; font-weight: 600; } #desktop table.grid tfoot input { background: var(--tint); } #desktop table.grid td.act { text-align: right; width: 1%; } #desktop table.grid tbody td.act button { opacity: 0; } #desktop table.grid tbody tr:hover td.act button, #desktop table.grid tbody td.act button:focus-visible { opacity: 1; } #desktop table.grid.compact { max-width: none; background: transparent; } #desktop .muted { color: var(--muted); } #desktop .returning { margin-top: 24px; } #desktop .returning h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } #desktop .returning div { display: flex; flex-wrap: wrap; gap: 8px; } #desktop .undo { display: flex; align-items: center; gap: 12px; background: #000d; color: #fff; border-radius: 14px; padding: 8px 10px 8px 18px; margin-bottom: 16px; max-width: 920px; box-sizing: border-box; font-weight: 600; } #desktop .undo span { flex: 1; } #desktop .undo button:not(.quiet) { background: #fff !important; color: #000; } #desktop .undo button.quiet { color: #fff; } #desktop .undo button.quiet:hover { background: rgba(255, 255, 255, 0.15); } /* Import: a two-step panel above the roster. */ #desktop .import { background: var(--panel); border-radius: 18px; padding: 18px 22px; margin-bottom: 20px; display: grid; gap: 12px; max-width: 920px; box-sizing: border-box; } #desktop .import .head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } #desktop .import h2 { font-size: 22px; font-weight: 800; } #desktop .steps { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: step; font-size: 15px; color: var(--muted); font-weight: 600; } #desktop .steps li { counter-increment: step; display: flex; align-items: center; gap: 6px; } #desktop .steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); font-size: 13px; font-weight: 800; } #desktop .steps li.on { color: var(--text); } #desktop .steps li.on::before { background: var(--accent); color: var(--bg); } #desktop .steps li.done::before { background: var(--accent-soft); color: var(--accent); } #desktop .import .privacy { margin: 0; font-size: 14px; color: var(--muted); max-width: 80ch; } #desktop .import input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; } #desktop .import label.file { color: var(--accent); font-weight: 700; cursor: pointer; padding: 6px 8px; border-radius: 8px; } #desktop .import label.file:hover { background: var(--accent-soft); } #desktop .tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; background: var(--tint); color: var(--muted); } #desktop .tag.new { background: var(--accent-soft); color: var(--accent); } #desktop .tag.update { background: color-mix(in srgb, #f0a400 22%, transparent); color: var(--text); } #desktop tr.same :is(th, td) { color: var(--muted); } #desktop .check { display: flex; gap: 10px; align-items: flex-start; max-width: 80ch; } #desktop .check input { margin-top: 4px; } /* ---------------------------------------------------------------- settings */ #desktop .settings .rows { background: var(--panel); border-radius: 18px; max-width: 920px; } #desktop .srow { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 24px; padding: 18px 24px; border-bottom: 1px solid var(--hair); } #desktop .srow:last-child { border-bottom: 0; } #desktop .srow h2 { font-size: 18px; font-weight: 800; } #desktop .srow .label .lock-note { margin: 4px 0 0; font-size: 14px; color: var(--muted); } #desktop .srow .control { display: grid; gap: 10px; align-content: start; } #desktop .srow .seg { display: flex; flex-wrap: wrap; gap: 6px; } #desktop .srow input.text { width: 18em; } #desktop .srow .playdown { display: flex; gap: 18px; flex-wrap: wrap; } #desktop .srow .playdown label { display: flex; align-items: center; gap: 8px; font-weight: 600; } #desktop .srow .playdown input { width: 3.5em; } @media (max-width: 1100px) { #desktop main { padding: 22px 26px 48px; } #desktop .scoreboard { grid-template-columns: 1fr; gap: 16px; } #desktop .leaders { justify-self: start; } #desktop .srow { grid-template-columns: 1fr; gap: 10px; } } @media (prefers-reduced-motion: reduce) { #desktop * { transition: none !important; } } /* Sign-in gate: the desktop is for signed-in coaches. */ #desktop:has(> .gate) { display: block; } #desktop .gate { max-width: 520px; margin: 12vh auto 0; padding: 32px 36px; background: var(--panel); border-radius: 22px; display: grid; gap: 12px; } #desktop .gate .brand { font-size: 22px; font-weight: 800; color: var(--accent); } #desktop .gate h1 { font-size: 32px; font-weight: 800; line-height: 1.15; } #desktop .gate p { margin: 0; color: var(--muted); } #desktop .gate .small { font-size: 14px; } #desktop .gate .small a { color: var(--accent); font-weight: 700; } #desktop .gate .check { display: flex; gap: 10px; align-items: center; font-weight: 600; margin-top: 6px; } #desktop .gate .check input { width: 18px; height: 18px; } #desktop .gate button.primary { min-height: 48px; border-radius: 14px; font-size: 18px; font-weight: 800; margin: 6px 0; } #desktop aside .foot .linkish { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 700; cursor: pointer; font: inherit; } /* "Bring your teams to this computer": the link QR. */ #desktop .welcome.link { margin-top: 8vh; } #desktop .welcome .howto { margin: 10px 0 14px; padding-left: 22px; display: grid; gap: 6px; font-size: 17px; } #desktop .linkbox { background: var(--panel); border-radius: 18px; padding: 18px; width: 300px; display: grid; justify-items: center; gap: 8px; } #desktop .linkbox .qr { width: 260px; } #desktop .linkbox .qr svg { display: block; width: 100%; height: auto; } #desktop .welcome .small { color: var(--muted); font-size: 15px; margin-top: 16px; } #desktop .linkish { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; } #desktop .welcome .coming { background: var(--accent-soft); border-radius: 14px; padding: 12px 16px; color: var(--text); font-weight: 600; } body[data-device="desktop"] #desktop .gate .linkbox.qrSignIn { margin: 6px 0 10px; } body[data-device="desktop"] #desktop .qrNumber { display: grid; justify-items: center; gap: 2px; } body[data-device="desktop"] #desktop .qrNumber small { color: var(--muted); font-size: 13px; font-weight: 600; } body[data-device="desktop"] #desktop .qrNumber b { font-size: 44px; font-weight: 800; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } body[data-device="desktop"] #desktop .gate button.secondary { min-height: 44px; border-radius: 14px; font-size: 16px; font-weight: 700; margin: 4px 0; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); } /* QR sign-in gate: two columns so it fits a laptop screen (≈ 480 px tall). */ body[data-device="desktop"] #desktop .gate.qrGate { max-width: 860px; margin: 8vh auto 0; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 36px; align-items: center; } body[data-device="desktop"] #desktop .gate.qrGate .gateText { display: grid; gap: 12px; align-content: start; } body[data-device="desktop"] #desktop .gate.qrGate h1 { font-size: 30px; } body[data-device="desktop"] #desktop .gate.qrGate .steps { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; color: var(--text); font-size: 16px; } body[data-device="desktop"] #desktop .gate.qrGate .linkbox.qrSignIn { margin: 0; width: 260px; padding: 16px; gap: 6px; background: color-mix(in srgb, var(--text) 4%, transparent); } body[data-device="desktop"] #desktop .gate.qrGate .linkbox .qr { width: 210px; } body[data-device="desktop"] #desktop .gate.qrGate .qrNumber b { font-size: 40px; line-height: 1; } body[data-device="desktop"] #desktop .gate.qrGate .gateFoot { grid-column: 1 / -1; } body[data-device="desktop"] #desktop .gate.qrGate button.secondary { justify-self: start; padding: 0 20px; } @media (max-width: 760px) { body[data-device="desktop"] #desktop .gate.qrGate { grid-template-columns: 1fr; margin-top: 4vh; } body[data-device="desktop"] #desktop .gate.qrGate .linkbox.qrSignIn { justify-self: center; } } /* The touch app's top strip isn't part of the desktop; the sign-in page is one centred card that never scrolls (Ryan, 2026-10-20). */ body[data-device="desktop"] #topStrip { display: none; } body[data-device="desktop"]:has(#desktop > .gate) { overflow: hidden; } body[data-device="desktop"] #desktop:has(> .gate) { display: grid; place-items: center; height: 100dvh; min-height: 0; padding: 16px; box-sizing: border-box; } body[data-device="desktop"] #desktop .gate.qrGate { margin: 0; max-height: calc(100dvh - 32px); } html:has(body[data-device="desktop"] #desktop > .gate) { overflow: hidden; } body[data-device="desktop"] #desktop .gate.qrGate { width: min(860px, 100%); box-sizing: border-box; } body[data-device="desktop"] #desktop:has(> .gate) { grid-template-columns: minmax(0, 1fr); } /* ---------------------------------------------------------------- stats, design pass 2026-10-20 Desktop density: 14 px tables, ~32 px rows, quieter cards; tabs instead of one long page. */ body[data-device="desktop"] #desktop main { max-width: 1320px; } body[data-device="desktop"] #desktop .topbar h1 { font-size: 28px; } body[data-device="desktop"] #desktop .subtabs { display: flex; gap: 2px; margin: -6px 0 18px; border-bottom: 1px solid var(--hair); } body[data-device="desktop"] #desktop .subtabs button { min-height: 38px; padding: 0 14px; border-radius: 8px 8px 0 0; background: transparent !important; color: var(--muted); font-weight: 700; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; } body[data-device="desktop"] #desktop .subtabs button:hover { color: var(--text); background: var(--tint) !important; } body[data-device="desktop"] #desktop .subtabs button.on { color: var(--accent); border-bottom-color: var(--accent); } body[data-device="desktop"] #desktop .scoreboard { border-radius: 14px; padding: 16px 22px; margin-bottom: 16px; } body[data-device="desktop"] #desktop .record .fig b { font-size: 40px; } body[data-device="desktop"] #desktop .stat { border-radius: 12px; padding: 12px 14px 6px; } body[data-device="desktop"] #desktop .stat > header { align-items: center; margin-bottom: 2px; } body[data-device="desktop"] #desktop .stat h3 { font-size: 16px; } body[data-device="desktop"] #desktop .stat .note { font-size: 13px; margin: 0 0 6px; } body[data-device="desktop"] #desktop table { font-size: 14px; } body[data-device="desktop"] #desktop :is(th, td) { padding: 5px 8px; } body[data-device="desktop"] #desktop thead th { font-size: 12px; } /* Sortable headings: the whole heading is the button. */ body[data-device="desktop"] #desktop th button.sort { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; font: inherit; color: inherit; } body[data-device="desktop"] #desktop th button.sort:hover { color: var(--text); } body[data-device="desktop"] #desktop th.asc button.sort::after { content: "▲"; font-size: 9px; } body[data-device="desktop"] #desktop th.desc button.sort::after { content: "▼"; font-size: 9px; } body[data-device="desktop"] #desktop th:is(.asc, .desc) { color: var(--accent); } /* Tables in a tab: two equal columns; a table with many columns takes the row. */ body[data-device="desktop"] #desktop .tables { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } body[data-device="desktop"] #desktop .stat.wide { grid-column: 1 / -1; } @media (max-width: 1000px) { body[data-device="desktop"] #desktop .tables { grid-template-columns: minmax(0, 1fr); } } /* Players: one table, heading row stays on screen while the page scrolls. */ body[data-device="desktop"] #desktop .stat.players { overflow: visible; } body[data-device="desktop"] #desktop .stat.players thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; } body[data-device="desktop"] #desktop .stat.players tbody tr:hover { background: color-mix(in srgb, var(--text) 3%, transparent); } body[data-device="desktop"] #desktop .stat.players td.sorted { font-weight: 800; } body[data-device="desktop"] #desktop .stat.players td.jersey { text-align: right; color: var(--muted); width: 2.5em; } body[data-device="desktop"] #desktop .stat.players .seg button { min-height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13px; } @media (max-width: 1150px) { body[data-device="desktop"] #desktop .stat.players .low { display: none; } } /* Overview */ body[data-device="desktop"] #desktop .ovGrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 12px; align-items: start; } body[data-device="desktop"] #desktop .ovSide { display: grid; gap: 12px; } @media (max-width: 1000px) { body[data-device="desktop"] #desktop .ovGrid { grid-template-columns: minmax(0, 1fr); } } body[data-device="desktop"] #desktop table.recent td.date { color: var(--muted); width: 1%; } body[data-device="desktop"] #desktop table.recent th small, body[data-device="desktop"] #desktop table.recent td small { color: var(--muted); font-weight: 600; } body[data-device="desktop"] #desktop table.recent td.who { color: var(--muted); white-space: normal; font-size: 13px; } body[data-device="desktop"] #desktop .res { display: inline-block; min-width: 1.2em; font-weight: 800; } body[data-device="desktop"] #desktop .res.W, body[data-device="desktop"] #desktop .chip.W b { color: var(--win); } body[data-device="desktop"] #desktop .res.L, body[data-device="desktop"] #desktop .chip.L b { color: var(--loss); } body[data-device="desktop"] #desktop .res.D, body[data-device="desktop"] #desktop .chip.D b { color: var(--muted); } body[data-device="desktop"] #desktop .form { display: flex; gap: 8px; padding: 6px 0 10px; } body[data-device="desktop"] #desktop .form .chip { display: grid; justify-items: center; min-width: 46px; padding: 6px 4px; border-radius: 10px; background: var(--tint); } body[data-device="desktop"] #desktop .form .chip b { font-size: 18px; } body[data-device="desktop"] #desktop .form .chip small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } body[data-device="desktop"] #desktop td.behind { color: var(--loss); font-weight: 700; } /* ---------------------------------------------------------------- games (js/deskgames.js) */ body[data-device="desktop"] #desktop .games { display: grid; gap: 12px; } body[data-device="desktop"] #desktop .games .topbar { margin-bottom: 4px; } body[data-device="desktop"] #desktop tr.click { cursor: pointer; } body[data-device="desktop"] #desktop tr.click:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } body[data-device="desktop"] #desktop .gamesList td.date { color: var(--muted); width: 1%; } body[data-device="desktop"] #desktop .gamesList td.act, body[data-device="desktop"] #desktop table.edit td.act { text-align: right; width: 1%; } body[data-device="desktop"] #desktop .games .back { justify-self: start; margin: -8px 0 -4px; } body[data-device="desktop"] #desktop .bigScore { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; } body[data-device="desktop"] #desktop .form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; padding: 6px 0 10px; } @media (max-width: 1000px) { body[data-device="desktop"] #desktop .form2 { grid-template-columns: minmax(0, 1fr); } } body[data-device="desktop"] #desktop .form2 .frow { display: grid; grid-template-columns: 8em minmax(0, 1fr); align-items: center; gap: 10px; font-weight: 600; color: var(--muted); } body[data-device="desktop"] #desktop .form2 .frow > :is(input, select) { color: var(--text); min-width: 0; } body[data-device="desktop"] #desktop .form2 .inline { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; } body[data-device="desktop"] #desktop .form2 .inline input[type="number"] { width: 4.5em; } body[data-device="desktop"] #desktop select { font: inherit; font-size: 14px; color: var(--text); background: var(--tint); border: 0; border-radius: 8px; padding: 6px 8px; max-width: 100%; } body[data-device="desktop"] #desktop table.edit td { padding: 4px 6px; } body[data-device="desktop"] #desktop table.edit select { width: 100%; } body[data-device="desktop"] #desktop table.edit input.min { width: 4em; padding: 6px 8px; } body[data-device="desktop"] #desktop .details .row { padding: 4px 0 8px; } body[data-device="desktop"] #desktop button.danger { color: var(--loss); } body[data-device="desktop"] #desktop button.danger[data-armed] { background: var(--loss) !important; color: #fff; } body[data-device="desktop"] #desktop .sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } @media (max-width: 1100px) { body[data-device="desktop"] #desktop .sheet { grid-template-columns: minmax(0, 1fr); } } body[data-device="desktop"] #desktop .sheet > .note { grid-column: 1 / -1; color: var(--muted); } body[data-device="desktop"] #desktop .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 10px; } body[data-device="desktop"] #desktop .chips .chip { min-height: 34px !important; padding: 0 12px !important; border-radius: 999px !important; font-size: 14px; } body[data-device="desktop"] #desktop .chips .chip.on { background: var(--accent) !important; color: var(--bg); } #newGame .schedPreview table { width: 100%; font-size: 14px; margin: 8px 0; border-collapse: collapse; } #newGame .schedPreview td { padding: 4px 6px; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } body[data-device="desktop"] #desktop .sheet { grid-template-columns: minmax(0, 1fr); max-width: 980px; } body[data-device="desktop"] #desktop .sheet .form2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; } body[data-device="desktop"] #desktop .sheet .form2 .frow { grid-template-columns: 6em minmax(0, 1fr); } body[data-device="desktop"] #desktop .stat > header .row { flex-wrap: nowrap; } body[data-device="desktop"] #desktop table.edit td:nth-child(1) { width: 5.5em; } body[data-device="desktop"] #desktop table.edit td:nth-child(2) { width: 5em; } /* Penalties: the second column is the player (not a minute) — as wide as Scorer; Result fits its words. */ body[data-device="desktop"] #desktop table.edit.pks td:nth-child(2) { width: auto; min-width: 200px; } body[data-device="desktop"] #desktop table.edit.pks td:nth-child(3) { width: 15em; } body[data-device="desktop"] #desktop .addGoalBox { display: flex; gap: 8px; align-items: center; } body[data-device="desktop"] #desktop .addGoalBox select { min-width: 180px; } body[data-device="desktop"] #desktop table.edit button.armed { color: var(--loss); font-weight: 800; } body[data-device="desktop"] #desktop .lineupPlan .lines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 6px 0; } @media (max-width: 1150px) { body[data-device="desktop"] #desktop .lineupPlan .lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body[data-device="desktop"] #desktop .lineupPlan .line { display: grid; gap: 6px; align-content: start; } body[data-device="desktop"] #desktop .lineupPlan h4 { margin: 0; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } body[data-device="desktop"] #desktop .lineupPlan .frow { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); align-items: center; gap: 8px; font-weight: 700; color: var(--accent); } body[data-device="desktop"] #desktop .lineupPlan .frow select { width: 100%; } body[data-device="desktop"] #desktop .lineupPlan .bench { margin: 4px 0 10px; color: var(--muted); } body[data-device="desktop"] #desktop .lineupPlan .bench b { color: var(--text); } body[data-device="desktop"] #desktop .lineupPlan header .row { gap: 8px; } @media print { /* Paper is white whatever the screen's appearance: the light palette (whiteboard theme), so dark mode doesn't print pale gray text. !important beats the dark-mode rules' higher specificity. */ body[data-device="desktop"] { --bg: #fff !important; --panel: #fff !important; --text: #1d2733 !important; --muted: #4f5b67 !important; --accent: #1d5fd1 !important; --win: #1f9d55 !important; --loss: #d12a2a !important; --tint: color-mix(in srgb, #1d2733 8%, transparent) !important; --tint-strong: color-mix(in srgb, #1d2733 12%, transparent) !important; --hair: color-mix(in srgb, #1d2733 12%, transparent) !important; --accent-soft: color-mix(in srgb, #1d5fd1 14%, transparent) !important; color-scheme: light !important; background: #fff; color: var(--text); } body[data-device="desktop"] #desktop { display: block; } body[data-device="desktop"] #desktop aside, body[data-device="desktop"] #desktop .noprint, body[data-device="desktop"] .toast { display: none !important; } body[data-device="desktop"] #desktop main { padding: 0; max-width: none; } } @page { margin: 14mm 12mm; } body[data-device="desktop"] #desktop tfoot :is(th, td) { border-top: 2px solid var(--hair); border-bottom: 0; font-weight: 800; } body[data-device="desktop"] #desktop .topbar .actions { flex-direction: column; align-items: flex-end; gap: 6px; align-self: end; } body[data-device="desktop"] #desktop .topbar .actions .btns { display: flex; gap: 10px; align-items: center; } body[data-device="desktop"] #desktop .topbar .actions .btns:empty { display: none; } body[data-device="desktop"] #desktop .topbar .syncPill { min-height: 26px; padding: 0 12px; font-size: 13px; } /* ---------------------------------------------------------------- design pass 2026-10-20 (2) Desktop sizes: 14–15 px UI text, compact sidebar, one primary button per page (the rest outlined), settings rows as label | control, dark mode. */ body[data-device="desktop"] #desktop { font-size: 15px; } body[data-device="desktop"] #desktop aside { padding: 18px 12px 14px; width: auto; } body[data-device="desktop"] #desktop { grid-template-columns: 220px minmax(0, 1fr); } body[data-device="desktop"] #desktop aside .brand { font-size: 18px; padding: 0 10px 12px; } body[data-device="desktop"] #desktop aside h2 { font-size: 11px; padding: 6px 10px 2px; } body[data-device="desktop"] #desktop aside nav button { min-height: 34px; font-size: 14px; border-radius: 8px; padding: 0 10px; font-weight: 600; } body[data-device="desktop"] #desktop aside nav button.on { font-weight: 700; } body[data-device="desktop"] #desktop aside .ico { width: 17px; height: 17px; } body[data-device="desktop"] #desktop aside .add button { font-size: 13px; padding: 4px 8px; } body[data-device="desktop"] #desktop aside nav.sections { margin-top: 10px; padding-top: 10px; } body[data-device="desktop"] #desktop aside .foot { padding: 10px 4px 0; gap: 8px; font-size: 13px; border-top: 1px solid var(--hair); } body[data-device="desktop"] #desktop aside .acct { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border-radius: 10px; background: transparent; text-align: left; color: var(--text); } body[data-device="desktop"] #desktop aside .acct:hover { background: var(--tint); } body[data-device="desktop"] #desktop aside .acct .avatar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 14px; } body[data-device="desktop"] #desktop aside .acct .who { display: grid; min-width: 0; } body[data-device="desktop"] #desktop aside .acct .who b { font-size: 14px; } body[data-device="desktop"] #desktop aside .acct .who small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-device="desktop"] #desktop aside a.gameApp { padding: 0 6px; font-size: 13px; } /* Header */ body[data-device="desktop"] #desktop main { padding: 20px 32px 48px; } body[data-device="desktop"] #desktop .topbar h1 { font-size: 24px; } body[data-device="desktop"] #desktop .topbar .where { font-size: 13px; } /* Buttons: compact; outlined secondary. */ body[data-device="desktop"] #desktop main button:not(.quiet):not(.season):not(.syncPill):not(.sort):not(.tab) { min-height: 34px; padding: 0 14px; border-radius: 9px; font-size: 14px; font-weight: 600; } body[data-device="desktop"] #desktop main button.ghost { background: transparent !important; box-shadow: inset 0 0 0 1px var(--tint-strong); color: var(--text); } body[data-device="desktop"] #desktop main button.ghost:hover { background: var(--tint) !important; } body[data-device="desktop"] #desktop main button.primary { font-weight: 700; } /* Settings: label | control rows, phone menu rows tamed. */ body[data-device="desktop"] #desktop .settings .rows { border-radius: 12px; max-width: 980px; } body[data-device="desktop"] #desktop .settings .srow { padding: 16px 20px; } body[data-device="desktop"] #desktop .settings .label h2 { font-size: 15px; } body[data-device="desktop"] #desktop .settings .control { display: grid; gap: 8px; align-content: start; } body[data-device="desktop"] #desktop .settings .mrow { display: grid; grid-template-columns: 7em minmax(0, 1fr); align-items: center; gap: 12px; min-height: 36px; padding: 0; background: none !important; box-shadow: none; text-align: left; font-weight: 600; color: var(--muted); border-radius: 0; } body[data-device="desktop"] #desktop .settings .mrow > :last-child { color: var(--text); justify-self: start; } body[data-device="desktop"] #desktop .settings button.mrow > b { color: var(--accent); } body[data-device="desktop"] #desktop .settings button.mrow:hover > b { text-decoration: underline; } body[data-device="desktop"] #desktop .settings .mrow input { max-width: 260px; } body[data-device="desktop"] #desktop .settings .toggleRow { background: transparent !important; min-height: 36px; padding: 0; font-size: 15px; max-width: 420px; box-shadow: none; } body[data-device="desktop"] #desktop .settings .seg button { min-height: 32px !important; padding: 0 12px !important; font-size: 14px !important; border-radius: 8px !important; } body[data-device="desktop"] #desktop .settings .playdown label { font-size: 14px; font-weight: 600; } /* Roster: the same table look as Stats. */ body[data-device="desktop"] #desktop table.grid { border-radius: 12px; font-size: 14px; } body[data-device="desktop"] #desktop table.grid :is(th, td) { padding: 5px 10px; } body[data-device="desktop"] #desktop table.grid thead th { font-size: 12px; padding-top: 10px; } body[data-device="desktop"] #desktop .notice { border-radius: 12px; font-size: 14px; } /* Dark mode: the computer's setting (Auto) or always (Dark); Light never. */ @media (prefers-color-scheme: dark) { body[data-device="desktop"]:not([data-scheme="light"]) { --bg: #12161c; --panel: #1b2129; --text: #e7ebf0; --muted: #96a1ae; --accent: #6ea8ff; --tint: color-mix(in srgb, #fff 8%, transparent); --tint-strong: color-mix(in srgb, #fff 14%, transparent); --hair: color-mix(in srgb, #fff 9%, transparent); --accent-soft: color-mix(in srgb, #6ea8ff 18%, transparent); --win: #3ccf7f; --loss: #ff6b6b; color-scheme: dark; } body[data-device="desktop"]:not([data-scheme="light"]) #desktop main button.primary, body[data-device="desktop"]:not([data-scheme="light"]) #desktop .seg button.on { color: #0b1220; } } body[data-device="desktop"][data-scheme="dark"] { --bg: #12161c; --panel: #1b2129; --text: #e7ebf0; --muted: #96a1ae; --accent: #6ea8ff; --tint: color-mix(in srgb, #fff 8%, transparent); --tint-strong: color-mix(in srgb, #fff 14%, transparent); --hair: color-mix(in srgb, #fff 9%, transparent); --accent-soft: color-mix(in srgb, #6ea8ff 18%, transparent); --win: #3ccf7f; --loss: #ff6b6b; color-scheme: dark; } body[data-device="desktop"][data-scheme="dark"] #desktop main button.primary, body[data-device="desktop"][data-scheme="dark"] #desktop .seg button.on { color: #0b1220; } body[data-device="desktop"][data-scheme="light"] { color-scheme: light; } body[data-device="desktop"] #desktop aside .foot2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; } body[data-device="desktop"] #desktop aside .scheme { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--tint); } body[data-device="desktop"] #desktop aside .scheme button { min-height: 22px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 700; background: transparent; color: var(--muted); } body[data-device="desktop"] #desktop aside .scheme button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px #0002; } /* Lineup planner (deskgames.js lineupCard): pitch | everyone. */ body[data-device="desktop"] #desktop .lineupPlan .planGrid { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 20px; align-items: start; padding: 4px 0 12px; } body[data-device="desktop"] #desktop .lineupPlan .minipitch .turf { position: relative; width: 100%; border-radius: 10px; background: var(--pitch-bg, #fbfbf8); color: var(--pitch-line, #2b3440); } body[data-device="desktop"] #desktop .lineupPlan .minipitch svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 0.3; vector-effect: non-scaling-stroke; opacity: 0.5; } body[data-device="desktop"] #desktop .lineupPlan .spot { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; width: 76px; min-height: 0 !important; padding: 0 !important; background: none !important; color: var(--token, #1f4fd1); cursor: grab; } body[data-device="desktop"] #desktop .lineupPlan .spot b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid currentColor; background: var(--pitch-bg, #fbfbf8); font-size: 14px; font-weight: 800; } body[data-device="desktop"] #desktop .lineupPlan .spot span { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; padding: 0 4px; border-radius: 5px; background: color-mix(in srgb, var(--pitch-bg, #fbfbf8) 85%, transparent); } body[data-device="desktop"] #desktop .lineupPlan .spot.empty { color: #8a94a1; } body[data-device="desktop"] #desktop .lineupPlan .spot.empty b { border-style: dashed; font-size: 11px; } body[data-device="desktop"] #desktop .lineupPlan .spot.picked b { box-shadow: 0 0 0 4px var(--accent-soft); border-color: var(--accent); } body[data-device="desktop"] #desktop .lineupPlan .plList h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } body[data-device="desktop"] #desktop .lineupPlan .plList ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; } body[data-device="desktop"] #desktop .lineupPlan .plList li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: 8px; cursor: grab; font-size: 14px; } body[data-device="desktop"] #desktop .lineupPlan .plList li + li { border-top: 1px solid var(--hair); } body[data-device="desktop"] #desktop .lineupPlan .plList li:hover { background: var(--tint); } body[data-device="desktop"] #desktop .lineupPlan .plList li.picked { background: var(--accent-soft); } body[data-device="desktop"] #desktop .lineupPlan .plList .pos { color: var(--accent); font-weight: 800; } body[data-device="desktop"] #desktop .lineupPlan .plList .nm { font-weight: 600; } body[data-device="desktop"] #desktop .lineupPlan .plList ul.bench { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; } body[data-device="desktop"] #desktop .lineupPlan .plList ul.bench li { grid-template-columns: minmax(0, 1fr); border-top: 0; } @media (max-width: 1100px) { body[data-device="desktop"] #desktop .lineupPlan .planGrid { grid-template-columns: minmax(0, 1fr); } } /* Settings rows: the phone-menu buttons lose their button padding here. */ body[data-device="desktop"] #desktop .settings :is(button.mrow, .toggleRow) { padding: 0 !important; min-height: 36px !important; border-radius: 0 !important; font-size: 15px !important; } /* Game editor fits a laptop screen (Ryan, 2026-10-20: "I don't want to scroll for it"): details as a compact 4-column block, the pitch sized to the window's height. */ body[data-device="desktop"] #desktop .games.one { gap: 10px; } body[data-device="desktop"] #desktop .games.one .topbar { margin-bottom: 0; } body[data-device="desktop"] #desktop .form4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 14px; padding: 4px 0 8px; } body[data-device="desktop"] #desktop .form4 .frow { display: grid; gap: 2px; font-size: 12px; font-weight: 700; color: var(--muted); } body[data-device="desktop"] #desktop .form4 .frow > :is(input, select, .inline) { color: var(--text); font-size: 14px; min-width: 0; } body[data-device="desktop"] #desktop .form4 input:not([type="checkbox"]), body[data-device="desktop"] #desktop .form4 select { height: 32px; padding: 4px 8px; box-sizing: border-box; } body[data-device="desktop"] #desktop .form4 .inline { font-size: 13px; font-weight: 500; } @media (max-width: 1000px) { body[data-device="desktop"] #desktop .form4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body[data-device="desktop"] #desktop .details .row { padding: 0 0 4px; } body[data-device="desktop"] #desktop .details > header { margin-bottom: 0; } body[data-device="desktop"] #desktop .lineupPlan .planGrid { grid-template-columns: auto minmax(0, 1fr); } body[data-device="desktop"] #desktop .lineupPlan .minipitch .turf { width: auto; height: clamp(300px, calc(100dvh - 420px), 560px); } body[data-device="desktop"] #desktop .lineupPlan .plList li { min-height: 28px; } body[data-device="desktop"] #desktop .lineupPlan .plList ul { margin-bottom: 10px; } body[data-device="desktop"] #desktop .lineupPlan .plList ul.bench li { grid-template-columns: minmax(0, 1fr) auto; } body[data-device="desktop"] #desktop .lineupPlan .plList button.out { color: var(--muted); font-size: 12px; padding: 2px 6px; opacity: 0; } body[data-device="desktop"] #desktop .lineupPlan .plList li:hover button.out { opacity: 1; } body[data-device="desktop"] #desktop .lineupPlan .outList { display: flex; flex-wrap: wrap; gap: 6px; } body[data-device="desktop"] #desktop .lineupPlan .outList .chip { min-height: 28px !important; padding: 0 10px !important; border-radius: 999px !important; font-size: 13px; color: var(--muted); text-decoration: line-through; } body[data-device="desktop"] #desktop .lineupPlan .outList .chip span { text-decoration: none; display: inline-block; margin-left: 2px; } body[data-device="desktop"] #desktop .lineupPlan .plList ul.field { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; } body[data-device="desktop"] #desktop .lineupPlan .plList ul.field li + li { border-top: 0; } body[data-device="desktop"] #desktop .lineupPlan .plList ul.field li { border-bottom: 1px solid var(--hair); border-radius: 0; } body[data-device="desktop"] #desktop .lineupPlan .plList ul.bench li { grid-template-columns: minmax(0, 1fr) auto; } body[data-device="desktop"] #desktop .lineupPlan .plList ul.bench li .nm { color: var(--text); } body[data-device="desktop"] #desktop .lineupPlan .plList button.out { min-height: 0 !important; background: transparent !important; } body[data-device="desktop"] #desktop .lineupPlan .minipitch .turf { height: clamp(250px, calc(100dvh - 380px), 560px); } body[data-device="desktop"] #desktop .details > header .row { gap: 10px; } body[data-device="desktop"] #desktop .details > header .row button { min-height: 30px !important; font-size: 13px !important; } body[data-device="desktop"] #desktop .lineupPlan .plList ul.field, body[data-device="desktop"] #desktop .lineupPlan .plList ul.bench { grid-template-columns: repeat(3, minmax(0, 1fr)); } body[data-device="desktop"] #desktop .lineupPlan .outList { align-items: center; } body[data-device="desktop"] #desktop .lineupPlan .outList h4 { margin: 0 6px 0 0; } body[data-device="desktop"] #desktop .lineupPlan .minipitch .turf { height: clamp(250px, calc(100dvh - 400px), 520px); } body[data-device="desktop"] #desktop main:has(.games.one) { padding-bottom: 16px; } @media (max-width: 1250px) { body[data-device="desktop"] #desktop .lineupPlan .plList :is(ul.field, ul.bench) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body[data-device="desktop"] #desktop .lineupPlan .minipitch .turf { container-type: size; } @container (max-height: 340px) { body[data-device="desktop"] #desktop .lineupPlan .spot b { width: 26px; height: 26px; font-size: 12px; border-width: 2px; } body[data-device="desktop"] #desktop .lineupPlan .spot span { font-size: 10px; max-width: 64px; } body[data-device="desktop"] #desktop .lineupPlan .spot { width: 64px; gap: 1px; } } body[data-device="desktop"] #desktop .lineupPlan .pickHint { position: absolute; z-index: 2; top: 8px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 2px 6px #0003; pointer-events: none; } body[data-device="desktop"] #desktop .lineupPlan .likely { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; padding: 6px 8px; border-radius: 10px; background: var(--accent-soft); } body[data-device="desktop"] #desktop .lineupPlan .likely h4 { margin: 0 6px 0 0; color: var(--accent); } body[data-device="desktop"] #desktop .lineupPlan .likely .chip { min-height: 28px !important; padding: 0 10px !important; border-radius: 999px !important; font-size: 13px; background: var(--panel) !important; } body[data-device="desktop"] #desktop .lineupPlan .plList ul { margin-bottom: 6px; } body[data-device="desktop"] #desktop .lineupPlan .likely { margin-bottom: 6px; padding: 4px 8px; } body[data-device="desktop"] #desktop .lineupPlan .plList h4 { margin-bottom: 4px; } body[data-device="desktop"] #desktop .wx .credit { font-size: 11px; color: var(--muted); margin-left: 6px; } body[data-device="desktop"] #desktop .tables.cols .col { display: grid; gap: 12px; align-content: start; min-width: 0; } /* Lineup planner, right panel v2 (2026-10-20): a fixed-height status bar, then the field as rows of pills by line (attack on top, like the pitch), bench and out rows. */ body[data-device="desktop"] #desktop .lineupPlan .plPanel { display: grid; gap: 10px; align-content: start; min-width: 0; } body[data-device="desktop"] #desktop .lineupPlan .planBar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--tint); font-size: 14px; overflow: hidden; white-space: nowrap; } body[data-device="desktop"] #desktop .lineupPlan .planBar.picking { background: var(--accent-soft); } body[data-device="desktop"] #desktop .lineupPlan .planBar b { color: var(--text); } body[data-device="desktop"] #desktop .lineupPlan .planBar.picking b { color: var(--accent); } body[data-device="desktop"] #desktop .lineupPlan .planBar .hint { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; } body[data-device="desktop"] #desktop .lineupPlan .planBar .chip { min-height: 28px !important; padding: 0 10px !important; border-radius: 999px !important; font-size: 13px !important; background: var(--panel) !important; flex: none; } body[data-device="desktop"] #desktop .lineupPlan .planBar .quiet { flex: none; } body[data-device="desktop"] #desktop .lineupPlan .lines { display: grid; gap: 6px; } body[data-device="desktop"] #desktop .lineupPlan .lineRow { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: start; gap: 10px; } body[data-device="desktop"] #desktop .lineupPlan .lineRow .lbl { padding-top: 7px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } body[data-device="desktop"] #desktop .lineupPlan .lineRow.bench { padding-top: 8px; border-top: 1px solid var(--hair); } body[data-device="desktop"] #desktop .lineupPlan .pills { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; } body[data-device="desktop"] #desktop .lineupPlan .pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 10px; border-radius: 9px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--tint-strong); font-size: 14px; cursor: grab; user-select: none; } body[data-device="desktop"] #desktop .lineupPlan .pill:hover { box-shadow: inset 0 0 0 1px var(--accent); } body[data-device="desktop"] #desktop .lineupPlan .pill.picked { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); } body[data-device="desktop"] #desktop .lineupPlan .pill .pos { color: var(--accent); font-size: 12px; font-weight: 800; min-width: 2.2em; } body[data-device="desktop"] #desktop .lineupPlan .pill .nm { font-weight: 600; } body[data-device="desktop"] #desktop .lineupPlan .pill .x { min-height: 0 !important; height: 24px; padding: 0 6px !important; border-radius: 6px !important; background: transparent !important; color: var(--muted); font-size: 13px !important; opacity: 0; } body[data-device="desktop"] #desktop .lineupPlan .pill:hover .x { opacity: 1; } body[data-device="desktop"] #desktop .lineupPlan .pill .x:hover { background: var(--tint) !important; color: var(--text); } body[data-device="desktop"] #desktop .lineupPlan .pill:not(.on) { padding-right: 4px; } body[data-device="desktop"] #desktop .lineupPlan .pill.empty { box-shadow: inset 0 0 0 1px var(--tint-strong); border: 0; background: transparent; cursor: pointer; padding-right: 10px; } body[data-device="desktop"] #desktop .lineupPlan .pill.empty .nm { color: var(--muted); font-style: italic; font-weight: 500; } body[data-device="desktop"] #desktop .lineupPlan .pill.gone { min-height: 32px !important; padding: 0 8px 0 10px !important; border-radius: 9px !important; background: transparent !important; color: var(--muted); font-weight: 500; cursor: pointer; } body[data-device="desktop"] #desktop .lineupPlan .pill.gone .nm { text-decoration: line-through; font-weight: 500; } body[data-device="desktop"] #desktop .lineupPlan .pill.gone .x { opacity: 1; } body[data-device="desktop"] #desktop .lineupPlan .small { font-size: 13px; padding-top: 6px; } body[data-device="desktop"] #desktop .lineupPlan .plPanel .lines { grid-template-columns: minmax(0, 1fr); padding: 0; } body[data-device="desktop"] #desktop .lineupPlan .pill { white-space: nowrap; flex: none; } /* Sidebar foot: the appearance switch on its own line. */ body[data-device="desktop"] #desktop aside .foot2 { flex-direction: column; align-items: flex-start; gap: 8px; } /* Details: one height for every control, text centred, a little more air. */ body[data-device="desktop"] #desktop .details .form4 { gap: 10px 18px; padding: 6px 0 10px; } body[data-device="desktop"] #desktop .details .form4 .frow { gap: 4px; } body[data-device="desktop"] #desktop .details .form4 input:not([type="checkbox"]), body[data-device="desktop"] #desktop .details .form4 select { height: 34px; line-height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--tint); font-size: 14px; color: var(--text); box-sizing: border-box; width: 100%; } body[data-device="desktop"] #desktop .details .form4 select { padding-right: 26px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size: 5px 5px; background-repeat: no-repeat; } body[data-device="desktop"] #desktop .details .form4 .inline { height: 34px; display: flex; align-items: center; gap: 8px; } body[data-device="desktop"] #desktop .details .form4 .inline input[type="number"] { width: 4.5em; } body[data-device="desktop"] #desktop .details .form4 .inline input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); } body[data-device="desktop"] #desktop .details > header { margin-bottom: 4px; } body[data-device="desktop"] #desktop .lineupPlan .pill .nm { color: var(--text); } body[data-device="desktop"] #desktop .lineupPlan .pill.gone .nm { color: var(--muted); } body[data-device="desktop"] #desktop .lineupPlan .pill { height: 30px; } body[data-device="desktop"] #desktop .lineupPlan .pills { min-height: 30px; gap: 5px; } body[data-device="desktop"] #desktop .lineupPlan .lines { gap: 5px; } body[data-device="desktop"] #desktop .lineupPlan .plPanel { gap: 8px; } body[data-device="desktop"] #desktop .lineupPlan .lineRow .lbl { padding-top: 6px; } body[data-device="desktop"] #desktop .lineupPlan .planBar { height: 36px; } body[data-device="desktop"] #desktop .lineupPlan .minipitch .turf { height: clamp(250px, calc(100dvh - 432px), 520px); } body[data-device="desktop"] #desktop .lineupPlan .outLbl { align-self: center; margin: 0 2px 0 10px; padding-left: 12px; border-left: 1px solid var(--hair); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } body[data-device="desktop"] #desktop table.grid td.last input { width: 12em; } body[data-device="desktop"] #desktop table.grid :is(th, td).last { color: var(--muted); } body[data-device="desktop"] #desktop .tournaments table.grid { max-width: none; width: 100%; } body[data-device="desktop"] #desktop .tournaments table.grid input { width: 100%; min-width: 7em; } body[data-device="desktop"] #desktop .tournaments table.grid th[scope="row"] { width: 23%; } body[data-device="desktop"] #desktop .tournaments table.grid td:nth-child(2) { width: 27%; } body[data-device="desktop"] #desktop .tournaments table.grid td.act button { opacity: 1; } body[data-device="desktop"] #desktop .tournaments table.grid td:nth-child(3) { width: 12%; } /* Tournament page: details + rules on the left, the schedule by day on the right. */ body[data-device="desktop"] #desktop .tcols { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 14px; align-items: start; } body[data-device="desktop"] #desktop .tform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; } body[data-device="desktop"] #desktop .tform .frow { display: grid; gap: 3px; font-size: 12px; font-weight: 700; color: var(--muted); } body[data-device="desktop"] #desktop .tform .frow.wide { grid-column: 1 / -1; } body[data-device="desktop"] #desktop .tform :is(input, select) { height: 34px; padding: 4px 8px; box-sizing: border-box; font-size: 14px; color: var(--text); min-width: 0; } body[data-device="desktop"] #desktop .sched .day { padding: 6px 0 10px; border-top: 1px solid var(--line, color-mix(in srgb, var(--text) 8%, transparent)); } body[data-device="desktop"] #desktop .sched .day:first-of-type { border-top: 0; } body[data-device="desktop"] #desktop .sched h4 { margin: 4px 0 6px; font-size: 14px; } body[data-device="desktop"] #desktop .sched table.grid { max-width: none; width: 100%; background: transparent; } body[data-device="desktop"] #desktop .sched table.grid td { padding: 3px 6px 3px 0; } body[data-device="desktop"] #desktop .sched table.grid td:nth-child(1) { width: 8.5em; } body[data-device="desktop"] #desktop .sched table.grid td:nth-child(2) { min-width: 150px; } /* the opponent: never "Rove" (review 2026-10-21) */ body[data-device="desktop"] #desktop .sameHint .clash { color: #c26d00; font-weight: 700; } body[data-device="desktop"] #desktop .sched table.grid td:nth-child(3) { width: 9.5em; } body[data-device="desktop"] #desktop .sched table.grid td:nth-child(4) { width: 8.5em; } body[data-device="desktop"] #desktop .sched table.grid :is(input, select) { width: 100%; height: 32px; box-sizing: border-box; } body[data-device="desktop"] #desktop .sched table.grid td.act { white-space: nowrap; width: 1%; } body[data-device="desktop"] #desktop .sched table.grid td.act button { opacity: 1; } body[data-device="desktop"] #desktop .sched .add { margin-top: 4px; } body[data-device="desktop"] #desktop .sched header { display: flex; justify-content: space-between; align-items: baseline; } @media (max-width: 1100px) { body[data-device="desktop"] #desktop .tcols { grid-template-columns: 1fr; } } body[data-device="desktop"] #desktop table.grid td.availCol .availRow { display: flex; gap: 6px; align-items: center; } body[data-device="desktop"] #desktop table.grid td.availCol select { height: 30px; padding: 2px 6px; background: transparent; border-radius: 8px; color: var(--text); font: inherit; font-size: 14px; } body[data-device="desktop"] #desktop table.grid tr.absent :is(th, td.num) { color: var(--muted); } body[data-device="desktop"] #desktop table.grid tr.rsec th { padding: 9px 12px; text-align: left; font-size: 13px; font-weight: 800; color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); } body[data-device="desktop"] #desktop table.grid tr.rsec .count { margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); } body[data-device="desktop"] #desktop table.grid tr.hintRow td { padding: 0 12px; } body[data-device="desktop"] #desktop .sameHint { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; } body[data-device="desktop"] #desktop .sameHint:not(:empty) { padding: 8px 0 2px; } body[data-device="desktop"] #desktop .sameHint button { opacity: 1; font-weight: 700; } /* Roster sections: each group's own column headings (same look as a table header). */ body[data-device="desktop"] #desktop table.grid tr.colHead th { font-size: 12px; font-weight: 700; color: var(--muted); padding-top: 8px; padding-bottom: 6px; text-align: left; } body[data-device="desktop"] #desktop table.grid tr.colHead th.num { text-align: right; } /* ---------------------------------------------------------------- design review 2026-10-20 (desktop D-1 … D-17) Contrast (X-5): a darker secondary grey and primary blue in light mode (dark mode keeps its own). */ body[data-device="desktop"] { --muted: #4b5563; --accent: #1d5fd1; } /* D-10: one content width for every page, and a header row that keeps its height with or without buttons. */ body[data-device="desktop"] #desktop main { max-width: 1240px; } body[data-device="desktop"] #desktop :is(table.grid, .settings .rows, .sheet, .import, .undo, .notice.guest) { max-width: none; } body[data-device="desktop"] #desktop .topbar { grid-template-rows: minmax(0, 1fr) auto; min-height: 74px; } body[data-device="desktop"] #desktop .topbar .where { align-self: end; } body[data-device="desktop"] #desktop .topbar .actions .btns, body[data-device="desktop"] #desktop .topbar .actions .btns:empty { display: flex; min-height: 34px; } /* D-1: the sign-in gate when no code can be had. */ body[data-device="desktop"] #desktop .gate.qrGate.failed { grid-template-columns: minmax(0, 1fr); max-width: 560px; } body[data-device="desktop"] #desktop .gate.qrGate.failed .lead { font-size: 17px; color: var(--text); } body[data-device="desktop"] #desktop .gate.qrGate.failed .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } body[data-device="desktop"] #desktop .gate.qrGate.failed .row button { margin: 0; padding: 0 22px; } /* D-3 / D-4: the Players table's unknown-scorer row and legend. */ body[data-device="desktop"] #desktop .stat.players tfoot tr.unknown :is(th, td) { font-weight: 600; color: var(--muted); font-style: italic; border-top: 1px solid var(--hair); } body[data-device="desktop"] #desktop .stat.players tfoot tr.unknown + tr :is(th, td) { border-top: 2px solid var(--hair); } body[data-device="desktop"] #desktop .stat .legend { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; } body[data-device="desktop"] #desktop thead th[title]:not([title=""]) .sort { text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; cursor: help; } /* D-5: playing time balance — the gap from the average, with its unit. */ body[data-device="desktop"] #desktop .balance td.vs { white-space: nowrap; font-size: 13px; } body[data-device="desktop"] #desktop .balance .note.none { margin-top: 8px; } /* D-8: "Saved · just now" in the game page header. */ body[data-device="desktop"] #desktop .savedNote { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; } body[data-device="desktop"] #desktop .savedNote.bad { color: var(--loss); } /* D-9: a tracked game's minutes and log (read-only). */ body[data-device="desktop"] #desktop .sheet > .note { color: var(--muted); } body[data-device="desktop"] #desktop table.readonly { width: 100%; border-collapse: collapse; font-size: 14px; } body[data-device="desktop"] #desktop table.readonly :is(th, td) { padding: 5px 8px; border-bottom: 1px solid var(--hair); text-align: left; } body[data-device="desktop"] #desktop table.readonly :is(th, td).num { text-align: right; font-variant-numeric: tabular-nums; } body[data-device="desktop"] #desktop table.readonly td.jersey { color: var(--muted); width: 2.5em; } body[data-device="desktop"] #desktop .logCard td.at { width: 4.5em; color: var(--muted); white-space: nowrap; } body[data-device="desktop"] #desktop .logCard td.kind { width: 9em; font-weight: 700; white-space: nowrap; } body[data-device="desktop"] #desktop .logCard tr.goal td.kind { color: var(--win); } body[data-device="desktop"] #desktop .logCard tr.against td.kind { color: var(--loss); } /* D-11: minutes share and planned subs in the lineup planner's chips. */ body[data-device="desktop"] #desktop .lineupPlan .pill .share { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } body[data-device="desktop"] #desktop .lineupPlan .pill.under .share { color: var(--loss); font-weight: 800; } body[data-device="desktop"] #desktop .lineupPlan .pill.under { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--loss) 45%, transparent); } body[data-device="desktop"] #desktop .lineupPlan .pill .then { font-size: 12px; color: var(--muted); } /* D-13: New game as a split button with a small menu. */ body[data-device="desktop"] #desktop .split { position: relative; display: inline-flex; } body[data-device="desktop"] #desktop main .split button.splitMain { border-radius: 9px 0 0 9px !important; } body[data-device="desktop"] #desktop main .split button.splitMore { border-radius: 0 9px 9px 0 !important; padding: 0 10px !important; margin-left: 1px; } body[data-device="desktop"] #desktop .split .caret { display: block; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); } body[data-device="desktop"] #desktop .splitMenu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; display: grid; min-width: 300px; padding: 6px; background: var(--panel); border-radius: 12px; box-shadow: 0 8px 28px #0003, 0 0 0 1px var(--hair); } body[data-device="desktop"] #desktop main .splitMenu button { display: grid; justify-items: start; gap: 1px; min-height: 0 !important; padding: 8px 12px !important; text-align: left; background: transparent !important; border-radius: 8px !important; color: var(--text); box-shadow: none; } body[data-device="desktop"] #desktop main .splitMenu button:hover { background: var(--tint) !important; } body[data-device="desktop"] #desktop .splitMenu small { font-size: 12px; font-weight: 500; color: var(--muted); } /* Paste a schedule (D-12, redone): text | preview. */ body[data-device="desktop"] #desktop .pasteGrid { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 16px; } /* The paste box above the preview, always (review 2026-10-21: side by side, the box was ~300 px and cut lines off, and even at the widest page the preview's 820 px table didn't fit next to it). */ body[data-device="desktop"] #desktop .pasteGrid { grid-template-columns: minmax(0, 1fr); } body[data-device="desktop"] #desktop .pasteLeft .note { margin-bottom: 8px; } body[data-device="desktop"] #desktop textarea.pasteIn { margin-top: 8px; min-height: 300px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; white-space: pre; } body[data-device="desktop"] #desktop textarea.pasteIn { min-height: 150px; height: 150px; } /* stacked: the preview stays in view */ body[data-device="desktop"] #desktop .formats { margin-top: 12px; font-size: 13px; color: var(--muted); } body[data-device="desktop"] #desktop .formats summary { cursor: pointer; font-weight: 700; color: var(--text); } body[data-device="desktop"] #desktop .formats ul { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 3px; } body[data-device="desktop"] #desktop .pastePreview > header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } body[data-device="desktop"] #desktop .pasteTable { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 14px; table-layout: fixed; } body[data-device="desktop"] #desktop .pastePreview { overflow-x: auto; } /* never squeeze Opponent / Location: scroll instead */ body[data-device="desktop"] #desktop .pasteTable col.date { width: 9.2em; } body[data-device="desktop"] #desktop .pasteTable col.time { width: 8.8em; } body[data-device="desktop"] #desktop .pasteTable col.venue { width: 6.4em; } body[data-device="desktop"] #desktop .pasteTable col.type { width: 8.6em; } body[data-device="desktop"] #desktop .pasteTable col.act { width: 6.8em; } body[data-device="desktop"] #desktop .pasteTable th { text-align: left; padding: 4px 4px 6px; } body[data-device="desktop"] #desktop .pasteTable td { padding: 3px 4px; border-top: 1px solid var(--hair); } body[data-device="desktop"] #desktop .pasteTable :is(input, select) { width: 100%; box-sizing: border-box; height: 32px; padding: 0 8px; font-size: 14px; border-radius: 8px; } body[data-device="desktop"] #desktop .pasteTable :is(input, select) { padding: 0 6px; } body[data-device="desktop"] #desktop .pasteTable tr.skip td:not(.act) { opacity: 0.45; } body[data-device="desktop"] #desktop .pasteTable tr.dupNote td { border-top: 0; padding: 0 4px 6px; font-size: 12px; color: var(--muted); } body[data-device="desktop"] #desktop .pasteTable td.act { width: 1%; white-space: nowrap; } body[data-device="desktop"] #desktop .badLines { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--loss) 8%, transparent); font-size: 13px; } body[data-device="desktop"] #desktop .badLines p { margin: 0; } body[data-device="desktop"] #desktop .badLines ul { margin: 6px 0 0; padding-left: 1.2em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); } /* Disabled buttons look disabled (Paste lines to preview). */ body[data-device="desktop"] #desktop main button:disabled, body[data-device="desktop"] #desktop main button.primary:disabled { background: var(--tint) !important; color: var(--muted) !important; box-shadow: none; cursor: not-allowed; } /* D-14: settings additions. */ body[data-device="desktop"] #desktop .settings .seasonRows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } body[data-device="desktop"] #desktop .settings .seasonRows li { display: flex; gap: 10px; align-items: baseline; } body[data-device="desktop"] #desktop .settings .control > button.ghost { justify-self: start; } /* D-15: the season report — # centred, a new page for the results. */ /* D-16: dark mode dims the planner's pitch (a softer panel, not a bright white one). */ @media (prefers-color-scheme: dark) { body[data-device="desktop"]:not([data-scheme="light"]) #desktop .lineupPlan { --pitch-bg: #c9cfc4; } } body[data-device="desktop"][data-scheme="dark"] #desktop .lineupPlan { --pitch-bg: #c9cfc4; } /* D-17: an appearance switch you can hit. */ body[data-device="desktop"] #desktop aside .scheme button { min-height: 28px; padding: 0 10px; font-size: 13px; } /* Playing time: fairness and Minutes by position side by side at the same height (Ryan); the bars spread to fill it. */ body[data-device="desktop"] #desktop .tables > .stat:is(.fairness, .positions) { align-self: stretch; } body[data-device="desktop"] #desktop .stat.chart.fairness { display: flex; flex-direction: column; } body[data-device="desktop"] #desktop .stat.chart.fairness .hbars { flex: 1; align-content: space-around; } /* Score sheet: a goal with no scorer (old imports only) asks for one; Add goal starts with who scored. */ body[data-device="desktop"] #desktop .sheet select.missing { outline: 2px solid var(--loss); outline-offset: 1px; color: var(--loss); } body[data-device="desktop"] #desktop .sheet select.addGoal { font-weight: 700; } body[data-device="desktop"] #desktop .qrGate .noPhone { margin: 14px 0 6px; font-size: 14px; color: var(--muted); } /* ---------------------------------------------------------------- polish pass (review 2026-10-21, P3) */ /* Sign-in steps: regular weight, the key words bold, each badge level with its first line. */ body[data-device="desktop"] #desktop .gate.qrGate .steps { padding-left: 0; font-weight: 400; gap: 8px; } body[data-device="desktop"] #desktop .gate.qrGate .steps li { align-items: flex-start; gap: 10px; line-height: 22px; } body[data-device="desktop"] #desktop .gate.qrGate .steps li::before { flex: none; } body[data-device="desktop"] #desktop .gate.qrGate .steps b { font-weight: 800; } /* Header: breadcrumb + sync pill on one row, the title + buttons on the next — one line of actions on every page. */ body[data-device="desktop"] #desktop .topbar { grid-template-areas: "where sync" "title actions"; grid-template-rows: auto auto; min-height: 0; align-items: center; } body[data-device="desktop"] #desktop .topbar .sync { grid-area: sync; justify-self: end; display: flex; } body[data-device="desktop"] #desktop .topbar .actions { flex-direction: row; align-items: center; align-self: center; } body[data-device="desktop"] #desktop .topbar .actions .btns { min-height: 34px; } /* Bars in stat tables end before their number (review: the bar ran under "600"). */ body[data-device="desktop"] #desktop td.bar { min-width: 130px; } body[data-device="desktop"] #desktop td.bar::before { right: calc(16px + 3em); width: calc((100% - 24px - 3em) * var(--w)); } /* Playing time balance: the bar in its own cell, in the fairness chart's colors. */ body[data-device="desktop"] #desktop .balance td.track { width: 40%; padding-right: 4px; } body[data-device="desktop"] #desktop .balance .hbar { display: block; height: 8px; border-radius: 999px; background: var(--tint); overflow: hidden; } body[data-device="desktop"] #desktop .balance .hbar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); } body[data-device="desktop"] #desktop .balance tr.low .hbar i { background: #e8890c; } body[data-device="desktop"] #desktop .balance td.pc { font-weight: 800; width: 3em; } /* Combos: the arrow at text size, on the middle line. */ /* (Drawn: the app font's → is small and sits low.) */ body[data-device="desktop"] #desktop th .arrow { display: inline-block; position: relative; width: 14px; height: 2px; margin: 0 8px; vertical-align: middle; background: var(--muted); border-radius: 1px; } body[data-device="desktop"] #desktop th .arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border: solid var(--muted); border-width: 2px 2px 0 0; transform: rotate(45deg); box-sizing: border-box; } /* Trends: "few games" as a gray tag after the label; the GP … GD columns at fixed widths so cards line up. */ body[data-device="desktop"] #desktop .tag.few { margin-left: 8px; padding: 1px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0; vertical-align: 1px; } body[data-device="desktop"] #desktop .stat.recordSplit thead th.num { width: 3.2em; } body[data-device="desktop"] #desktop .stat.recordSplit thead th.num.long { width: 5.5em; } body[data-device="desktop"] #desktop main .stat button.linkish { min-height: 0 !important; padding: 0 !important; border-radius: 0 !important; background: none !important; font-size: inherit !important; font-weight: 600 !important; color: var(--accent); text-align: left; } body[data-device="desktop"] #desktop .stat .linkish:hover { text-decoration: underline; } /* Roster: Undo floats over the page (nothing moves); Available is quiet, its arrow on hover; the last name looks editable. */ body[data-device="desktop"] #desktop .undo { position: fixed; z-index: 30; left: calc(50% + 110px); bottom: 24px; transform: translateX(-50%); width: min(560px, calc(100vw - 280px)); margin: 0; box-shadow: 0 8px 28px #0004; } body[data-device="desktop"] #desktop table.grid td.availCol select.avail { appearance: none; padding-right: 22px; background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 6px; } body[data-device="desktop"] #desktop table.grid td.availCol select.avail.ok { color: var(--muted); } body[data-device="desktop"] #desktop table.grid td.availCol select.avail.injured { color: #c26d00; font-weight: 700; } body[data-device="desktop"] #desktop table.grid td.availCol select.avail.season { color: var(--loss); font-weight: 700; } body[data-device="desktop"] #desktop table.grid tr:hover td.availCol select.avail, body[data-device="desktop"] #desktop table.grid td.availCol select.avail:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6'/%3E%3C/svg%3E"); background-color: var(--tint); } body[data-device="desktop"] #desktop table.grid input.lastIn::placeholder { color: transparent; } body[data-device="desktop"] #desktop table.grid input.lastIn:is(:hover, :focus)::placeholder { color: var(--muted); } body[data-device="desktop"] #desktop table.grid input.lastIn:hover { box-shadow: inset 0 0 0 1px var(--tint-strong); } /* Settings: room for "People and devices" on one line. */ body[data-device="desktop"] #desktop .settings .mrow { grid-template-columns: 10em minmax(0, 1fr); } /* Inline text links (button.linkish) never take the page's button look. */ body[data-device="desktop"] #desktop main button.linkish { min-height: 0 !important; padding: 0 !important; border-radius: 0 !important; background: none !important; font-size: inherit !important; font-weight: 700 !important; color: var(--accent); box-shadow: none; } body[data-device="desktop"] #desktop main button.linkish:hover { text-decoration: underline; } /* "‹ Games" at the start of the breadcrumb row. */ body[data-device="desktop"] #desktop .topbar .where button.back { min-height: 0 !important; padding: 2px 8px 2px 4px !important; margin-left: -4px; border-radius: 8px !important; background: transparent !important; color: var(--accent); font-weight: 700; font-size: inherit; } body[data-device="desktop"] #desktop .topbar .where button.back:hover { background: var(--accent-soft) !important; } body[data-device="desktop"] #desktop .topbar .where button.back::after { content: "·"; margin-left: 10px; color: var(--muted); opacity: 0.6; } body[data-device="desktop"] #desktop .bigScore.none { font-size: 18px; color: var(--muted); font-weight: 700; } /* Games list: a played game's "Partly tracked" / "Score only" as a tag after the opponent. */ body[data-device="desktop"] #desktop .games > .stat:not(.tournaments) .gamesList th[scope="row"] { width: 45%; } body[data-device="desktop"] #desktop .gamesList th .tag { margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0; padding: 1px 8px; vertical-align: 1px; } /* Lineup planner: what the red chips mean. */ body[data-device="desktop"] #desktop .lineupPlan .planBar .underKey { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex: none; } body[data-device="desktop"] #desktop .lineupPlan .planBar .underKey i { width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--loss) 70%, transparent); } body[data-device="desktop"] #desktop .lineupPlan .planBar .underKey + .hint { display: none; } /* The planner's pitch keeps its goal line inside the card. */ body[data-device="desktop"] #desktop .lineupPlan .minipitch { padding-bottom: 8px; } body[data-device="desktop"] #desktop .lineupPlan .minipitch svg { overflow: visible; } /* Score sheet: a PK box you can hit. */ body[data-device="desktop"] #desktop table.edit input.pkBox { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; vertical-align: middle; } /* Who played: checked = filled with a check mark; not played = an outline. */ body[data-device="desktop"] #desktop .whoPlayed .chips .chip.played { background: transparent !important; box-shadow: inset 0 0 0 1px var(--tint-strong); color: var(--muted); font-weight: 600; } body[data-device="desktop"] #desktop .whoPlayed .chips .chip.played.on { background: var(--accent) !important; box-shadow: none; color: var(--bg); font-weight: 700; } body[data-device="desktop"] #desktop .whoPlayed .chips .chip.played.on::before { content: ""; display: inline-block; width: 9px; height: 5px; margin: 0 7px 3px 0; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); } body[data-device="desktop"] #desktop .whoPlayed > header .row { gap: 2px; } /* Tournament page. */ body[data-device="desktop"] #desktop .tourney > header { margin-bottom: 8px; } body[data-device="desktop"] #desktop .sched button.timeText { width: 100%; text-align: left; font-weight: 600; color: var(--text); padding: 6px 8px; } body[data-device="desktop"] #desktop .sched .day.other input[type="date"] { height: 34px; padding: 0 8px; box-sizing: border-box; } /* Paste a schedule: lines wrap in the box; a batch tournament name; lines without a date in a neutral note. */ body[data-device="desktop"] #desktop textarea.pasteIn { white-space: pre-wrap; overflow-wrap: anywhere; } body[data-device="desktop"] #desktop .pasteEvent { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); } body[data-device="desktop"] #desktop .pasteEvent input { width: 18em; height: 32px; padding: 0 8px; font-size: 14px; box-sizing: border-box; } body[data-device="desktop"] #desktop .badLines { background: var(--tint); } /* Seasons dialog: the seasons are the main targets; Start a new season is secondary. */ body[data-device="desktop"] #newGame .seasonList button:hover { color: var(--accent); } body[data-device="desktop"] #newGame .seasonList ~ button.go { min-height: 44px; font-size: 16px; font-weight: 700; background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); position: static; } /* Account menu (access.js desktopAccountMenu, 2026-10-21): a small menu above the sidebar's account row, not the phone's full-height ☰ sheet. left/bottom are set from the account row when it opens. */ body[data-device="desktop"] #menu.acctPop { position: fixed; inset: auto auto 72px 12px; margin: 0; width: 300px; height: auto; max-height: calc(100vh - 32px); padding: 8px; border: 1px solid var(--line, color-mix(in srgb, var(--text) 12%, transparent)); border-radius: 12px; background: var(--panel); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); font-size: 14px; animation: none; } body[data-device="desktop"] #menu.acctPop::backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } body[data-device="desktop"] #menu.acctPop .acctHead { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; } body[data-device="desktop"] #menu.acctPop .acctHead .avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; } body[data-device="desktop"] #menu.acctPop .acctHead .who { display: grid; min-width: 0; } body[data-device="desktop"] #menu.acctPop .acctHead .who small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-device="desktop"] #menu.acctPop .acctGroup { display: grid; padding: 4px 0; border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); } body[data-device="desktop"] #menu.acctPop .mrow, body[data-device="desktop"] #menu.acctPop .toggleRow { min-height: 36px; padding: 0 8px; border: 0; border-radius: 8px; font-size: 14px; font-weight: 600; background: transparent; color: var(--text); text-align: left; } body[data-device="desktop"] #menu.acctPop button.mrow:hover, body[data-device="desktop"] #menu.acctPop .toggleRow:hover { background: var(--tint, color-mix(in srgb, var(--text) 6%, transparent)); } body[data-device="desktop"] #menu.acctPop .mrow b { font-weight: 600; color: var(--muted); } body[data-device="desktop"] #menu.acctPop .toggleRow .lbl small { font-size: 12px; } body[data-device="desktop"] #menu.acctPop .toggleRow .switch { transform: scale(0.8); transform-origin: right center; } body[data-device="desktop"] #menu.acctPop .scheme { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--tint, color-mix(in srgb, var(--text) 8%, transparent)); } body[data-device="desktop"] #menu.acctPop .scheme button { min-height: 26px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 700; background: transparent; color: var(--muted); } body[data-device="desktop"] #menu.acctPop .scheme button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px #0002; } body[data-device="desktop"] #menu.acctPop .nameEdit { display: flex; gap: 6px; align-items: center; padding: 4px 8px; } body[data-device="desktop"] #menu.acctPop .nameEdit input.text { flex: 1; min-width: 0; height: 32px; font-size: 14px; text-align: left; } body[data-device="desktop"] #menu.acctPop .nameEdit button { min-height: 32px; padding: 0 12px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 700; } body[data-device="desktop"] #menu.acctPop .mrow.signout { color: var(--text); } body[data-device="desktop"] #menu.acctPop .mrow.signout.armed { background: #d93a32; color: #fff; } body[data-device="desktop"] #menu.acctPop .signoutNote { display: none; margin: 4px 8px 2px; font-size: 12px; color: var(--muted); } body[data-device="desktop"] #menu.acctPop .signout.armed + .signoutNote { display: block; } body[data-device="desktop"] #menu.acctPop .mrow.delete { color: #d12a2a; } body[data-device="desktop"] #menu.acctPop .acctHead:focus { outline: none; }