/* 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; }
/* fix round 1 (Adam's iPhone, 08/11 10:4x: the home's head and tiles painted over the open drill): the app screen is one stacking
   context of its own at the bottom, so the overlays appended to the body (the drill, the points and feedback sheets, settings, the
   toast) always paint above everything inside it, however WebKit layers the touch scrollers and the nudge's animation */
.scr.app { isolation: isolate; z-index: 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 Install app button under Go (Adam 07/11/2026, his coach app v5.10.30: a black-grey box, squared, no outline, white text),
   the fields' width; hidden when the app runs from the home screen and on the new password; a tap shows one line of help */
body.can-install .signin .go { margin-bottom: 12px; }
.signin .inst { width: 100%; height: 44px; margin: 0 0 calc(32px + var(--safe-b)); border: 0; outline: 0; border-radius: 8px; background: #374151; color: #fff;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s, transform .12s; }
.signin .inst:active { background: var(--ink); transform: scale(.985); }
.signin .inst[hidden], .signin .inst-help[hidden], body[data-state="password"] .signin .inst, body[data-state="password"] .signin .inst-help { display: none; }
.signin .inst-help { width: 100%; margin: -20px 0 calc(28px + var(--safe-b)); font-size: 14px; line-height: 1.45; color: var(--muted); text-align: center; }
.signin .inst-help b { color: var(--ink); font-weight: 600; }
body.can-install[data-state="password"] .signin .go { margin-bottom: calc(44px + var(--safe-b)); }

/* ---------- 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; 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; will-change: transform; }
.dim { will-change: opacity; }
.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; }
}