/* The player app's tokens and the shell (lane 3), copied from set 4 round 3 (13 player app/records/2026-11-05 player app design
   set 4/: workout.html for the panes, the head and the row; sign in.html for the sign-in and the new password; shared/badge.html for
   the badge). Every pane's CSS uses these tokens, never a literal colour the tokens already hold. The colourway is set on
   <html data-way="basketball|football"> from the signed-in player's route. Poppins: the system font stands in until the font file
   is self-hosted in public/assets/ (no call leaves the app, the never list). */

:root, [data-way="basketball"] {
  --accent: #F46D25; --accent-dark: #C4551A; --button: #B84F18; --deepest: #9A3F11; --second: transparent;
  --tint: color-mix(in srgb, var(--accent) 14%, #fff);
  --page: #F3F4F6; --card: #fff; --ink: #111827; --muted: #6B7280; --rule: #E5E7EB; --green: #1a8f4a; --red: #E24B4A;
  --shadow: 0 0 0 1px rgba(0,0,0,.04), 0 10px 18px -8px rgba(0,0,0,.18);
  --spring: cubic-bezier(.2,.8,.2,1);
  --font: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --row-h: 80px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
[data-way="football"] { --accent: #3A97FF; --accent-dark: #2B77D1; --button: #276FC4; --deepest: #1D5BA4; --second: #FFCC00; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* the page colour to the very top (fix round 4): html carries it too, so no grey shows past the body; the strip over the status-bar
   area takes the colour of what sits under it (top.js) and theme-color follows */
html { background: var(--page); }
.topcap { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); z-index: 30; pointer-events: none; background: var(--page); }
body { background: var(--page); font-family: var(--font); color: var(--ink); overflow: hidden; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
svg { display: block; }
[data-way="basketball"] .fb, [data-way="football"] .bb { display: none !important; }

/* ---------- the screens: sign-in, then the app ---------- */
.scr { position: fixed; inset: 0; transition: transform .55s var(--spring), opacity .4s ease; }
body[data-screen="app"] .scr.signin { transform: translateX(-30%); opacity: 0; pointer-events: none; }
body:not([data-screen="app"]) .scr.app { transform: translateX(100%); opacity: 0; pointer-events: none; }
body[data-screen="loading"] .scr { opacity: 0; }

/* ---------- the sign in: the mark, two fields, one button (sign in.html, round 4) ---------- */
.signin { display: flex; flex-direction: column; align-items: center; padding: 0 20px; max-width: 480px; margin: 0 auto; }
.signin .mark { width: 96px; height: 96px; margin-top: clamp(80px, 21vh, 176px); position: relative; flex: 0 0 auto;
  transition: margin-top .45s var(--spring), width .45s var(--spring), height .45s var(--spring); }
.signin .mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.signin .mark .c { display: none; }
[data-way="football"] .signin .mark .h { display: none; }
[data-way="football"] .signin .mark .c { display: block; }
body.typing .signin .mark, body[data-state="wrong"] .signin .mark, body[data-state="password"] .signin .mark { margin-top: 70px; width: 72px; height: 72px; }

.signin form { width: 100%; display: flex; flex-direction: column; align-items: center; flex: 1; }
.signin .fields { width: 100%; margin-top: 48px; display: flex; flex-direction: column; gap: 12px; transition: margin-top .45s var(--spring); }
body.typing .signin .fields, body[data-state="wrong"] .signin .fields { margin-top: 30px; }
body[data-state="password"] .signin .fields { margin-top: 48px; gap: 36px; }
.signin .field { width: 100%; height: 58px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow);
  display: flex; align-items: center; padding: 0 18px; position: relative; transition: box-shadow .2s; }
.signin .field:focus-within { box-shadow: var(--shadow), 0 0 0 2px var(--accent-dark); }
body[data-state="wrong"] .signin .field.pw { box-shadow: var(--shadow), 0 0 0 2px var(--red); }
.signin .field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 500;
  color: var(--ink); letter-spacing: .01em; padding: 0; height: 100%; caret-color: var(--accent-dark); }
.signin .field input::placeholder { color: #9CA3AF; }
.signin .field input[type="password"] { letter-spacing: .14em; }
.signin .field .lbl { display: none; position: absolute; left: 18px; top: -22px; font-size: 13px; font-weight: 500; color: var(--muted); }
body[data-state="password"] .signin .field .lbl { display: block; }
.signin .eye { width: 22px; height: 22px; color: #9CA3AF; border: 0; background: none; padding: 0; cursor: pointer; flex: 0 0 auto; }
.signin .eye svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.signin .oops { display: none; width: 100%; margin-top: 14px; color: var(--ink); font-size: 14px; line-height: 1.4; }
.signin .oops .ask { display: block; margin-top: 3px; color: var(--accent-dark); font-weight: 600; }
body[data-state="wrong"] .signin .oops, body[data-state="password"] .signin .oops.show { display: block; }
.signin .go { margin-top: auto; margin-bottom: calc(44px + var(--safe-b)); width: 100%; height: 60px; border: 0; border-radius: 16px; background: var(--button); color: #fff;
  font-size: 17px; font-weight: 700; letter-spacing: .01em; cursor: pointer; transition: background .12s, transform .12s;
  box-shadow: 0 10px 18px -8px rgba(0,0,0,.25); -webkit-tap-highlight-color: transparent; }
.signin .go:active { background: var(--deepest); transform: scale(.985); }
.signin .go[disabled] { opacity: .6; }

/* ---------- the app: the panes by horizontal swipe, the row at the foot (workout.html) ---------- */
.app { display: flex; flex-direction: column; }
.panes { position: absolute; top: env(safe-area-inset-top, 0px); bottom: calc(var(--row-h) + var(--safe-b) * 0); left: 0; right: 0;
  display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.panes::-webkit-scrollbar { display: none; }
.panes.dragging { scroll-snap-type: none; cursor: grabbing; }
.pane { flex: 0 0 100%; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; scroll-snap-align: start; scroll-snap-stop: always; scrollbar-width: none; }
.pane::-webkit-scrollbar { display: none; }

/* the head: the pale peach disc with the white figure, the name, the badge and the points; the avatar opens settings */
.head { display: flex; align-items: center; gap: 12px; padding: 12px 20px 6px; }
.cut { height: 1px; background: var(--rule); margin: 4px 0 0; }
.who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; background: linear-gradient(160deg, #E8D5C4, #C9A88F); flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.05); transition: transform .12s; }
.avatar:active { transform: scale(.94); }
.avatar svg, .avatar img { width: 40px; height: 40px; display: block; object-fit: cover; }
.names { min-width: 0; }
.pname { font-size: 15px; font-weight: 500; color: #374151; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pts { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.pts .n { font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1; }
.pts.bump .badge { animation: bump .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes bump { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* the points badge, word for word from shared/badge.html */
.badge { width: 24px; height: 24px; display: block; flex: 0 0 auto; }
.badge .badge-disc { fill: url(#badge-grad); }
.badge .badge-star { fill: #fff; }
[data-way="football"] .badge .badge-disc { fill: #FFCC00; }
[data-way="football"] .badge .badge-star { fill: #1D5BA4; }

/* a pane that is not loaded yet: an empty card, never an error (the frame of workout.html) */
.frame { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.frame .blk { background: var(--rule); border-radius: 10px; }
.frame .rowblk { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; }
.frame .rowblk .c { width: 36px; height: 36px; border-radius: 50%; background: var(--rule); flex: 0 0 auto; }
.frame .rowblk .b { height: 12px; border-radius: 6px; background: var(--rule); }
.card { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); }

/* the row of the five panes at the foot: the icons exactly as set 2 and set 4 draw them */
.row { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--row-h) + var(--safe-b) * 0); background: var(--card); display: flex; padding: 0 4px;
  box-shadow: 0 -1px 0 rgba(17,24,39,.04), 0 -8px 20px -12px rgba(17,24,39,.18); z-index: 5; }
.row button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; padding: 0 0 22px; cursor: pointer;
  color: var(--muted); font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; -webkit-tap-highlight-color: transparent; transition: color .15s; }
.row button:active { opacity: .7; }
.row button.on { color: var(--accent-dark); }
.row svg { width: 26px; height: 26px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.row button.on svg .body { fill: currentColor; }
.row button.on svg .det { stroke: #fff; }
.row button.on svg .detf { fill: #fff; stroke: none; }
.row svg .detf { fill: currentColor; stroke: none; }
/* the Boards icon when current, as set 4 leaderboard.html draws it (round 2 R3): a white outline outside each bar, the fill whole
   beneath it (paint-order stroke), the tallest bar painted last so the gaps either side of it are the same */
.row button.on .ic-bars rect { stroke: #fff; stroke-width: 3; paint-order: stroke; }
.row .ic-fb { display: none; }
[data-way="football"] .row .ic-fb { display: block; }
[data-way="football"] .row .ic-bb { display: none; }

/* settings behind the head: the sheet settings.html draws (the coach app's bottom sheet, .rg-pop): white, radius 22 at the top,
   the handle 40 by 4, the × in its grey disc, over the pane dimmed rgba(28,28,30,.55); its insides are lane 5's settings pane */
.dim { position: fixed; inset: 0; background: rgba(28,28,30,.55); opacity: 0; pointer-events: none; transition: opacity .32s ease; z-index: 19; }
.over.open + .dim { opacity: 1; pointer-events: auto; }
.over { position: fixed; left: 0; right: 0; bottom: 0; max-height: calc(100% - 58px); background: var(--card); border-radius: 22px 22px 0 0; z-index: 20;
  transform: translateY(100%); transition: transform .42s var(--spring); display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -8px 30px -10px rgba(0,0,0,.35); touch-action: none; max-width: 480px; margin: 0 auto; }
.over.open { transform: translateY(0); }
.over.dragging { transition: none; }
.over .grab { height: 28px; display: grid; place-items: center; cursor: grab; flex: 0 0 auto; }
.over .grab span { width: 40px; height: 4px; border-radius: 2px; background: #D1D5DB; display: block; }
.over .x { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; background: var(--rule); color: var(--muted);
  display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; z-index: 2; }
.over .x:active { transform: scale(.92); }
.over .x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.over-sc { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; touch-action: pan-y; }
.over-sc::-webkit-scrollbar { display: none; }

/* a short note at the foot (offline, saved) */
.toast { position: fixed; left: 50%; bottom: calc(var(--row-h) + 14px); transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 10px 16px; border-radius: 12px; transition: opacity .25s, transform .25s; pointer-events: none; z-index: 30; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .scr, .signin .mark, .signin .fields, .over, .dim, .toast { transition: none; }
  .pts.bump .badge { animation: none; }
  .panes { scroll-behavior: auto; }
}