/* A football player's iPhone view (owner requests 2026-10-24,
   docs/football-iphone.md): every page of the website in the look of a phone
   app, with one tab bar that scrolls sideways (football-tabs.js). Used by the
   Record page (phone.css) and by the website's pages at /football/<tab>
   (dashboard.css), marked html.football-phone fp-<tab> by football-phone-early.js. */

/* ---- The tab bar: about five tabs in view, swipe for the rest. ---- */
.active-tabs.football-tabs{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;gap:2px;padding-inline:4px}
.active-tabs.football-tabs::-webkit-scrollbar{display:none}
/* The fade at the end shows that the bar scrolls. It fades into the bar's own
   colour, so the page behind never shows through the bar. */
.active-tabs.football-tabs::after{content:'';position:sticky;inset-inline-end:0;flex:0 0 22px;align-self:stretch;margin-inline-start:-22px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bg))}
[dir=rtl] .active-tabs.football-tabs::after{background:linear-gradient(270deg,transparent,var(--bg))}
/* A fixed height: a long or translated name never changes the bar (two lines at most). */
.active-tabs.football-tabs a{flex:0 0 19.5%;scroll-snap-align:center;height:56px;min-height:0;padding:4px 2px;font-size:11px;line-height:1.15;text-align:center;overflow:hidden}
.active-tabs.football-tabs a span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.3em}
.active-tabs.football-tabs a span{overflow-wrap:anywhere}
.active-tabs.football-tabs a[hidden]{display:none}

/* ---- No bounce (owner report 2026-10-24): in the iPhone browser the whole
   screen, tab bar included, moved when pulled past the top or bottom. The
   page scrolls; the header row and the tab bar stay where they are. ---- */
html.football-phone,html.fp-record,html.football-phone body,html.fp-record body{overscroll-behavior:none}
/* The page scrolls inside <main>, never the browser window (owner report
   2026-10-24): Safari then never shrinks or grows its own toolbar while the
   player scrolls or changes tab, so the tab bar above it does not move. */
html.football-phone,html.fp-record,html.football-phone body,html.fp-record body{height:100%;overflow:hidden}
/* As tall as the part of the screen that is visible (100dvh), not the strip
   behind the browser's own bottom toolbar, so the end of the page is never
   under the tab bar (owner report 2026-10-24: Recording settings half hidden). */
html.football-phone main.shell,html.fp-record main.shell{height:100%;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:calc(84px + env(safe-area-inset-bottom))}
/* The page area is the box of everything positioned in it (owner report
   2026-10-25: after Save on Player profile the header and the quote were above
   the screen). Screen-reader-only labels were placed against the whole
   document and made it 3776 px tall, so a focused field or Save could scroll
   the document itself, and nothing scrolls it back. Now it is never taller
   than the screen (football-tabs.js also puts it back if anything moves it). */
html.football-phone main.shell,html.fp-record main.shell{position:relative}

/* Between tabs the bar and the header row are carried over unchanged; only
   the page itself fades, quickly (football-phone-early.js opts in). */
#footballTabs{view-transition-name:fp-tabs}
.football-phone-top{view-transition-name:fp-top}
::view-transition-old(fp-tabs),::view-transition-new(fp-tabs),::view-transition-old(fp-top),::view-transition-new(fp-top){animation:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}

/* ---- The website's pages as phone tabs ---- */
.football-phone-top,.fp-loader{display:none}
html.football-phone .shell{max-width:680px;padding:16px 14px 24px}
html.fp-record main.shell{padding-top:16px;padding-left:14px;padding-right:14px}
/* One header on every tab, Record too (Galaxy S7 screen recording
   2026-10-24: on Record it sat lower and was taller). Every size is set here,
   because Record has phone.css under it and the other tabs dashboard.css. */
:is(html.football-phone,html.fp-record) .football-phone-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;padding:0}
.fp-brand{display:grid;text-decoration:none;color:var(--text);min-width:0}
.football-phone-top .fp-brand .eyebrow{margin:0;color:var(--green);font-size:11px;font-weight:850;letter-spacing:.14em;line-height:1.45;text-transform:uppercase}
.football-phone-top .fp-brand strong{font-size:26px;font-weight:700;letter-spacing:normal;line-height:1.1}
/* The offline copy (docs/offline-app.md): "Offline" in place of the name, in
   the name's colour (contrast checked for every theme), with an amber dot. */
.football-phone-top .fp-offline::before{content:'';display:inline-block;width:7px;height:7px;margin:0 6px 1px 0;border-radius:50%;background:var(--amber,#ffc75c);vertical-align:middle}
.football-phone-top .eyebrow>[hidden]{display:none}
.fp-actions{display:flex;align-items:center;gap:8px}
.football-phone-top .site-language-control{display:inline-flex;align-items:center;gap:7px;margin:0;color:var(--muted);font-size:12px;font-weight:700}
.fp-actions .site-language-control>span{display:none}
.football-phone-top .site-language-control select{height:35px;min-width:90px;max-width:116px;margin:0;padding:0 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);font:inherit;font-size:.78rem}
.football-phone-top .appearance-button{width:34px;height:34px;min-width:0;min-height:0;margin:0;padding:0;align-self:center;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text)}
.fp-avatar{display:grid;place-items:center;width:44px;height:44px;min-width:0;min-height:0;padding:0;flex:none;overflow:hidden;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--text)}
/* Record hides it while recording; its place stays, so nothing in the header moves. */
.football-phone-top .fp-avatar[hidden]{display:grid!important;visibility:hidden}
.fp-avatar[aria-current=page]{border-color:var(--green);color:var(--green)}
.fp-avatar.has-photo{border-color:var(--green)}.fp-avatar.has-photo>svg{display:none}
.fp-avatar>img.fp-photo{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.fp-avatar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* No browser tap square on the tabs and the header (the same recording:
   Chrome flashed a blue square on every tapped tab). */
.active-tabs.football-tabs a,.football-phone-top :is(a,button,label,select){-webkit-tap-highlight-color:transparent}
/* Record has the website's colours and page background as well (phone.css
   has its own), so nothing changes colour between tabs. A chosen Appearance
   sets its colours on <html> itself and wins over these. */
html.fp-record{background:var(--bg);--bg:#06100c;--panel:#0b1d15;--panel2:#10281d;--line-rgb:224 255 235;--line:rgb(var(--line-rgb) / .12);--text:#f4fff7;--muted:#8fa69a;
  --green:#31e981;--green2:#9bffc5;--accent-rgb:49 233 129;--accent2-rgb:155 255 197;--shade-rgb:2 13 8;--panel-rgb:16 40 29;--panel-deep-rgb:7 25 17}
html.fp-record body{background:radial-gradient(circle at 82% -10%,rgb(var(--accent-rgb) / .15),transparent 34%),radial-gradient(circle at 0 20%,rgba(104,200,255,.08),transparent 28%),var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
/* The website's header, tab row and computer-only cards stay on the website. */
html.football-phone header.topbar,html.football-phone nav.dashboard-tabs,html.football-phone .site-footer,
html.football-phone #androidTestCard,html.football-phone #keepFreeBanner,
html.football-phone #recordChoice{display:none!important}
html.fp-sessions .dashboard-page-intro,html.fp-position .dashboard-page-intro,html.fp-tracker .dashboard-page-intro,html.fp-coach .dashboard-page-intro{display:none!important}
html.football-phone .dashboard-page-intro{margin:4px 0 12px;padding:0;border:0;background:none;box-shadow:none}
html.football-phone .dashboard-page-intro h2{font-size:28px;margin:0}
html.football-phone .layout,html.football-phone .records-layout,html.football-phone .trend-grid,html.football-phone .visual-grid{grid-template-columns:minmax(0,1fr)}
html.football-phone .panel{border-radius:18px}
/* Nothing floats over the page (owner report 2026-10-24: Save profile came
   loose and moved while scrolling): the website's sticky parts stay in place. */
html.football-phone :is(.profile-savebar,.sessions){position:static}
/* Share link Overview (owner report 2026-10-25): Progress · Heatmap · Latest ·
   All recordings came loose and floated over the page while scrolling. */
html.football-phone .share-nav{position:static}
/* No file import and no "Cloud database connected" line on phones and in the app
   (owner decision 2026-10-26): the Tracker tab saves tracker recordings and phone
   recordings are sent by themselves; a saved file is imported on a computer, as
   the Record page's Save backup says. Offline, "● Offline" in the header says it. */
html.football-phone .dashboard-actions{display:none!important}
/* Sessions: the session list. */
html.fp-sessions #detail{display:none}
html.fp-sessions .session-bar{position:static;max-height:none}
/* Tracker (owner request 2026-10-25): only the Bluetooth tracker card, which
   Sessions no longer shows. The tab is there only while Bluetooth is (football-tabs.js). */
html.fp-sessions #bluetoothTracker{display:none!important}
html.fp-tracker main.shell>.layout{display:none!important}
/* Heatmap: the chosen session's analysis with Position & activity. */
html.fp-position .session-bar,html.fp-position #bluetoothTracker{display:none!important}
/* AI Coach: only the coach. Trends: everything but the coach. */
html.fp-coach .trend-kpis,html.fp-coach .trend-grid,html.fp-coach .objective-panel,html.fp-coach .trend-table-panel,
html.fp-coach .trend-wide,html.fp-coach .trend-zones,
html.fp-coach .shell>.toolbar{display:none!important}
html.fp-trends .ai-coach{display:none!important}
/* The tab bar, the same on every tab, Record too (phone.css drew Record's a
   little see-through): the page colour of the chosen Appearance. */
:is(html.football-phone,html.fp-record) .active-tabs.football-tabs{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;
  background:var(--bg);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));backdrop-filter:blur(8px)}
html.football-phone .active-tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;color:var(--muted);text-decoration:none;font-weight:650;border-radius:12px}
html.football-phone .active-tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* The open tab's square: the same colour on every tab, the Record tab too
   (owner report 2026-10-24: on Record it was dark with a light Appearance). */
.active-tabs.football-tabs a[aria-current=page]{color:var(--green);background:var(--panel2,var(--panel))}
@media (min-width:720px){:is(html.football-phone,html.fp-record) .active-tabs.football-tabs{left:50%;right:auto;width:680px;transform:translateX(-50%);border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0}}
/* The Record tab lays itself out before it is shown (record-early); the tab
   bar stays in sight meanwhile (owner report 2026-10-24: the bar jumped). */
html.record-early #footballTabs,html.record-early .football-phone-top,html.record-early.fp-settling .fp-settle{visibility:visible}
/* Record: the header above instead of the Record page's own header row; the
   title below without a second PlayerTrack360 line. */
html.fp-record main.shell>nav.topbar{display:none!important}
html.fp-record main.shell>header>.eyebrow{display:none}
/* No jumping (owner report 2026-10-24): until the page is translated and has
   stopped changing size, only the header and the tab bar show, with the
   loading rings between them (football-tabs.js). */
html.fp-settling main.shell>*:not(.football-phone-top):not(#footballTabs):not(.fp-settle){visibility:hidden}
/* Sessions and Heatmap (football-view.mjs): the same while their loading screen shows. */
html.fp-loading main.shell>*:not(.football-phone-top):not(.fp-loader){visibility:hidden}
.fp-settle{display:none}
/* See-through: the page under it is hidden while it shows, so the page background
   runs on without an edge under the header (owner report 2026-10-24). */
html.fp-settling .fp-settle,html.football-phone .fp-loader:not([hidden]){display:flex;inset:84px 0 calc(68px + env(safe-area-inset-bottom)) 0;z-index:40;background:transparent}
/* Every loading screen of the iPhone view in the chosen Appearance (owner
   report 2026-10-24: Sessions and Heatmap showed it on black). */
:is(.fp-settle,.fp-loader) .app-loader-rings span{border-color:rgb(var(--line-rgb,239 252 242) / .26)}
:is(.fp-settle,.fp-loader) .app-loader-rings span:nth-child(2){border-color:rgb(var(--line-rgb,239 252 242) / .18)}
:is(.fp-settle,.fp-loader) .app-loader-rings span:nth-child(3){border-color:rgb(var(--line-rgb,239 252 242) / .12)}
:is(.fp-settle,.fp-loader) .app-loader-rings .app-loader-arc{border-color:transparent;border-top-color:var(--green)}
:is(.fp-settle,.fp-loader) .app-loader-rings i{background:var(--green)}
/* Saving from the tracker on a phone (owner request 2026-10-25): the rings over
   the Tracker tab only, in the page colours; the tab bar stays, and other tabs
   open meanwhile (football-view.mjs). The Tracker tab shows how far it is. */
html.football-phone .app-loader.tracker-lock{inset:0 0 calc(68px + env(safe-area-inset-bottom)) 0;z-index:40;background:transparent}
html.football-phone .tracker-lock .app-loader-rings span{border-color:rgb(var(--line-rgb,239 252 242) / .26)}
html.football-phone .tracker-lock .app-loader-rings span:nth-child(2){border-color:rgb(var(--line-rgb,239 252 242) / .18)}
html.football-phone .tracker-lock .app-loader-rings span:nth-child(3){border-color:rgb(var(--line-rgb,239 252 242) / .12)}
html.football-phone .tracker-lock .app-loader-rings .app-loader-arc{border-color:transparent;border-top-color:var(--green)}
html.football-phone .tracker-lock .app-loader-rings i{background:var(--green)}
html.football-phone .app-loader.tracker-lock p{color:var(--text)}
html.football-phone:not(.fp-tracker) .app-loader.tracker-lock{display:none!important}
html.tracker-busy.fp-tracker main.shell>*:not(.football-phone-top):not(#trackerLock){visibility:hidden}
#footballTabs.fp-busy a[data-tab="record"],html.tracker-busy .football-phone-top .fp-brand{opacity:.35}

/* Player profile (the profile picture): Privacy, Terms and Sign out. */
.fp-signout{display:grid;gap:10px;justify-items:center;margin:18px 0 8px;text-align:center}
.fp-signout p{margin:0}.fp-signout a{color:var(--green)}
.fp-signout button{width:100%;min-height:48px}

/* ---- Record tab: few words while recording (owner request 2026-10-24). ---- */
body.football-mode .metrics>div:has(#pointCount),body.football-mode .metrics>div:has(#interruptions),
body.football-mode .metrics>div:has(#wakeState),body.football-mode #gpsHint{display:none}

/* Recordings still on this phone, above the list (phone-waiting.mjs,
   docs/offline-app.md). Text in the page's own colours; the amber dot only marks. */
.phone-waiting{display:grid;gap:8px;margin:0 0 12px;padding:12px;border:1px dashed var(--line);border-radius:14px}
.phone-waiting-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;font-size:.9rem;color:var(--text)}
.phone-waiting-count{min-width:24px;padding:2px 8px;border-radius:999px;background:var(--panel2,rgb(255 255 255 / .06));text-align:center;font-weight:700;font-size:.8rem}
.phone-waiting-row{cursor:default;text-decoration:none}
a.phone-waiting-row{cursor:pointer}
.phone-waiting-pill{display:inline-flex;align-items:center;gap:6px;max-width:42vw;font-size:.75rem;font-weight:700;color:var(--text);text-align:end}
.phone-waiting-pill::before{content:'';width:7px;height:7px;flex:none;border-radius:50%;background:var(--amber,#ffc75c)}
.phone-waiting-note{margin:0;color:var(--muted);font-size:.78rem}
.phone-waiting .session-row{grid-template-columns:40px minmax(0,1fr) auto;border:1px solid var(--line);border-radius:14px;background:rgb(255 255 255 / .02)}
.phone-waiting .session-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgb(var(--accent-rgb,88 244 150) / .12);color:var(--green);font-size:0}
.phone-waiting .session-icon svg{width:24px;height:24px}
.phone-waiting .session-icon.type-match{background:rgba(255,199,92,.14);color:var(--amber,#ffc75c)}
.phone-waiting .session-icon.type-walk,.phone-waiting .session-icon.type-run{background:rgba(104,200,255,.13);color:var(--blue,#68c8ff)}
.phone-waiting .session-main small{white-space:normal}

/* "Use without internet" (offline-copy.mjs, docs/offline-app.md). */
.offline-switch{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px;padding:12px;border:1px solid var(--line);border-radius:14px;color:var(--text);cursor:pointer;text-align:start}
.offline-switch input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--green)}
.offline-switch>span{display:grid;gap:3px}
.offline-switch small{color:var(--muted);font-size:.78rem;line-height:1.4}
.offline-switch[hidden]{display:none}

/* Previous and Next on Heatmap (dashboard.mjs sessionStep, owner request 2026-10-26). */
.session-step{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.session-step .action{min-height:40px;margin:0;padding:0 14px}
.session-step .action[disabled]{opacity:.4;cursor:default}
.session-step-count{color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums}
[dir=rtl] .session-step [aria-hidden="true"]{display:inline-block;transform:scaleX(-1)}

/* ---- A computer or tablet (owner request 2026-10-26): the same pages and tabs
   as the phone and the app, wider on a big screen, with every function the
   computer website had (football-phone-early.js marks html.fp-computer). ---- */
/* The computer's own extras: Import and the server line, the Keep it free and
   Android test cards on Sessions (each still shown only when it applies), and
   the website's footer. */
html.football-phone.fp-computer.fp-sessions .dashboard-actions{display:flex!important}
html.football-phone.fp-computer.fp-sessions :is(#androidTestCard,#keepFreeBanner):not([hidden]){display:grid!important}
html.football-phone.fp-computer .site-footer{display:flex!important}
/* The notification bell in the header, in a place kept from the first frame. */
/* Its list opens under the header at the content's edge (2026-10-27: under
   the icon row it started off the left edge on 320–375 px phones) and above
   the cards that follow (the header is its own layer for page transitions). */
.football-phone-top{position:relative;z-index:70}
.fp-bell-slot{display:inline-block;width:34px;height:34px;flex:none}
.football-phone-top .notify-bell{display:grid;place-items:center;width:34px;height:34px;min-width:0;min-height:0;margin:0;padding:0;
  border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text)}
/* Record on a computer: the button is off, and a QR code opens Record on the phone (recorder.mjs). */
.record-qr{display:grid;justify-items:center;gap:8px;margin:14px auto 0;text-align:center}
.record-qr svg{width:168px;height:168px;padding:8px;border-radius:12px;background:#fff}
.record-qr p{margin:0;color:var(--muted);font-size:.82rem}
/* A big screen: wider pages, side-by-side cards where the website had them, every tab in view. */
@media (min-width:1000px){
  /* The page scrolls across the whole window (the mouse wheel works beside the
     content too, and the scrollbar is at the window's edge, owner's screen
     2026-10-26); the content stays centred, 1080 px wide. */
  html.football-phone .shell,html.fp-record main.shell{max-width:none;padding-inline:max(14px,calc((100% - 1080px) / 2))}
  html.football-phone .records-layout{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}
  html.football-phone .trend-grid{grid-template-columns:repeat(3,1fr)}
  html.football-phone .visual-grid:not(.visual-grid-wide){grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr)}
  :is(html.football-phone,html.fp-record) .active-tabs.football-tabs{width:1080px}
  :is(html.football-phone,html.fp-record) .active-tabs.football-tabs a{flex:1 1 0}
  :is(html.football-phone,html.fp-record) .active-tabs.football-tabs::after{display:none}
}

/* The signed-in name and Log out on every page (owner request 2026-10-26): a
   slim line under the header on a phone, in the header row on a wider screen. */
:is(html.football-phone,html.fp-record) .football-phone-top{flex-wrap:wrap;row-gap:4px}
.football-phone-top .fp-account{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:1 0 100%;order:3;min-width:0;height:30px}
.football-phone-top .fp-user{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.82rem;font-weight:700}
.football-phone-top .fp-logout{height:30px;min-height:0;margin:0;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);
  color:var(--text);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (min-width:720px){
  .football-phone-top .fp-account{flex:0 1 auto;order:1;margin-inline-start:auto;height:auto}
  .football-phone-top .fp-actions{order:2}
}