/* Pickleball Analytics, CLIENT site — theme tokens per brand + the shared components of every page.
   One bundle serves two looks: <html data-brand="sporfie|shark"> is set by the inline <head> script of every page before the
   first paint (shark on shark.* hosts or ?brand=shark, else sporfie). A brand = the custom properties below + brand strings
   (logo, product name in French, footer credit, default language: assets/site.js PV.BRAND, assets/i18n.js).
   Light only: both brands present the same look on every device.
   Data colours (teams, shot groups) never wear the brand accent; text never wears a data colour. */
@font-face {   /* Roboto (Sporfie's UI face), variable 100-900, latin subset, OFL; self-hosted */
  font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/roboto-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  color-scheme: light;
  /* neutrals */
  --page: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9; --ink: #0f172a; --ink-2: #475569; --muted: #64748b;
  --grid: #e2e8f0; --axis: #cbd5e1; --border: #e2e8f0; --border-strong: #cbd5e1; --mono: #64748b;
  /* brand accent (UI chrome only) */
  --brand: #ff8d3f; --brand-600: #e25d09; --brand-700: #c2450d; --brand-tint: rgba(255, 141, 63, 0.10); --brand-tint-2: rgba(255, 141, 63, 0.18);
  --brand-grad: linear-gradient(90deg, #c2450d, #ff8d3f);
  --link: #c2450d; --link-hover: #e25d09; --focus: #e25d09; --accent-ink: #c2450d;
  --sel: #c2450d; --sel-ink: #ffffff; --sel-shadow: 0 1px 2px rgb(194 69 13 / 0.35);
  --cta-bg: #ff8d3f; --cta-ink: #1c0a00; --cta-bg-hover: #ffa15f;
  /* bars + hero */
  --nav-bg: #020817; --nav-ink: #cbd5e1; --nav-ink-on: #ffffff; --nav-line: rgba(255, 255, 255, 0.08); --nav-h: 64px;
  --hero-bg: #020817; --hero-ink: #ffffff; --hero-ink-2: #cbd5e1; --hero-glow: rgba(255, 141, 63, 0.22); --accent-on-dark: #ff8d3f;
  --foot-bg: #020817; --foot-ink: #94a3b8; --foot-ink-strong: #e2e8f0; --foot-line: rgba(255, 255, 255, 0.08);
  --logo: url("brand/sporfie-logo-light.svg"); --logo-w: 104px; --logo-h: 16px; --logo-mark: url("brand/sporfie-mark-light.svg"); --logo-mark-w: 22px; --logo-mark-h: 21px;
  /* data */
  --t1: #2a78d6; --t2: #0b8a7a;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --good: #1a9a4b; --bad: #d03b3b; --warn: #c98500;
  --court: #e6e9ee; --court-k: #dce0e6; --court-line: #ffffff; --court-out: #f3f5f8; --net: #475569;
  /* shape + type */
  --shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 1px 3px rgb(15 23 42 / 0.06);
  --shadow-2: 0 4px 10px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.06);
  --shadow-3: 0 16px 32px -12px rgb(15 23 42 / 0.18), 0 6px 12px -6px rgb(15 23 42 / 0.10);
  --radius: 16px; --radius-md: 12px; --radius-sm: 10px; --radius-xs: 7px; --radius-pill: 999px;
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --h1-weight: 800; --h1-spacing: -0.025em; --h1-transform: none; --h1-size: 44px;
  --h2-weight: 800; --h2-spacing: 0.01em; --h2-transform: uppercase; --h2-size: 19px;
  --title-transform: none; --nav-transform: none; --nav-spacing: 0; --nav-weight: 500; --nav-size: 14.5px;
  /* language toggle on the bar (assets/i18n.js) */
  --lang-bd: rgba(255, 255, 255, 0.22); --lang-bg: rgba(255, 255, 255, 0.06); --lang-ink: #cbd5e1; --lang-on-bg: #c2450d; --lang-on-ink: #ffffff; --lang-radius: 10px;
}
/* Shark Media & Sport (white label): its tokens and component treatments are in assets/shark.css (loaded last on every page). */

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* components below set display; the hidden attribute must still win */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 56px); }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.55 var(--font); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
a { color: inherit; }
:where(main) a:where(:not([class])) { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:where(main) a:where(:not([class])):hover { color: var(--link-hover); }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

/* brand-only elements: markup carries both, the brand set before the first paint shows one */
:root:not([data-brand="shark"]) .only-shark, :root[data-brand="shark"] .only-sporfie { display: none !important; }

/* ------------------------------------------------------------------ top bar */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--nav-bg); border-bottom: 1px solid var(--nav-line); color: var(--nav-ink-on); }
.topbar .wrap { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.topbar .brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--nav-ink-on); flex: none; white-space: nowrap; }
.topbar .logo { flex: none; width: var(--logo-w); height: var(--logo-h); background: var(--logo) no-repeat left center / contain; }
.topbar .pname { font: 600 15px/1 var(--font-head); letter-spacing: 0.005em; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.22);
  text-transform: var(--title-transform); }
.topbar nav { display: flex; gap: 4px; flex: 1; min-width: 0; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a { display: inline-flex; align-items: center; text-decoration: none; color: var(--nav-ink); padding: 0 12px; position: relative;
  font: var(--nav-weight) var(--nav-size) var(--font-head); text-transform: var(--nav-transform); letter-spacing: var(--nav-spacing); white-space: nowrap; transition: color 0.15s; }
.topbar nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--brand); transform: scaleX(0); transition: transform 0.18s ease; }
.topbar nav a:hover, .topbar nav a.on { color: var(--nav-ink-on); }
.topbar nav a.on::after { transform: scaleX(1); }
.topbar :focus-visible { outline-color: var(--brand); outline-offset: -2px; }
@media (max-width: 760px) {
  .topbar .wrap { gap: 10px; height: 56px; }
  .topbar .pname { display: none; }
  .topbar .logo { width: var(--logo-mark-w); height: var(--logo-mark-h); background-image: var(--logo-mark); }
  .topbar nav a { padding: 0 9px; font-size: 14px; }
  .topbar nav a::after { left: 9px; right: 9px; }
  html { scroll-padding-top: 110px; }
}

/* section bar under the top bar (report sections): sticky, scrolls sideways on small screens */
.subbar { position: sticky; top: var(--nav-h); z-index: 25; background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.subbar .wrap { display: flex; align-items: center; gap: 4px; height: 46px; overflow-x: auto; scrollbar-width: none; }
.subbar .wrap::-webkit-scrollbar { display: none; }
.subbar .st { font-weight: 700; font-size: 13.5px; margin-right: 12px; white-space: nowrap; color: var(--ink); }
.subbar a { text-decoration: none; color: var(--ink-2); font-size: 13.5px; font-weight: 500; padding: 6px 11px; border-radius: var(--radius-pill); white-space: nowrap;
  text-transform: var(--nav-transform); letter-spacing: var(--nav-spacing); transition: background-color 0.15s, color 0.15s; }
.subbar a:hover { color: var(--ink); background: var(--surface-2); }
.subbar a.on { color: var(--accent-ink); background: var(--brand-tint); }
@media (max-width: 760px) { .subbar { top: 56px; } .subbar .st { display: none; } }

/* ------------------------------------------------------------------ page header (match pages) */
.phead { background: var(--hero-bg); color: var(--hero-ink); position: relative; overflow: hidden; }
.phead::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 120% at 85% 0%, var(--hero-glow), transparent 70%); }
.phead .wrap { position: relative; padding-top: 30px; }
.phead .crumbs { font-size: 13px; color: var(--hero-ink-2); margin: 0 0 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.phead .crumbs a { color: var(--hero-ink-2); text-decoration: none; }
.phead .crumbs a:hover { color: var(--hero-ink); }
.phead .crumbs .sep { opacity: 0.5; }
.phead h1 { color: var(--hero-ink); }
.phead .meta { color: var(--hero-ink-2); font-size: 15.5px; margin: 10px 0 0; }
.gsw { display: inline-flex; gap: 4px; margin: 16px 0 0; flex-wrap: wrap; }
.gsw a { text-decoration: none; font-size: 13px; font-weight: 600; color: var(--hero-ink-2); border: 1px solid rgba(255, 255, 255, 0.18); padding: 4px 12px; border-radius: var(--radius-pill); }
.gsw a:hover { color: var(--hero-ink); border-color: rgba(255, 255, 255, 0.4); }
.gsw a.on { background: var(--hero-ink); color: var(--hero-bg); border-color: var(--hero-ink); }
.tabs { display: flex; gap: 2px; margin-top: 22px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { text-decoration: none; color: var(--hero-ink-2); font: 600 14.5px/1 var(--font-head); padding: 14px 16px 15px; white-space: nowrap; position: relative;
  text-transform: var(--nav-transform); letter-spacing: var(--nav-spacing); }
.tabs a:hover { color: var(--hero-ink); }
.tabs a.on { color: var(--hero-ink); }
.tabs a.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); }
@media (max-width: 600px) { .phead .wrap { padding-top: 22px; } .tabs { margin-top: 14px; } .tabs a { padding: 12px 11px 13px; font-size: 14px; } }

/* ------------------------------------------------------------------ type */
section { padding: 44px 0 0; scroll-margin-top: calc(var(--nav-h) + 56px); }
h1 { font: var(--h1-weight) var(--h1-size)/1.08 var(--font-head); margin: 0; letter-spacing: var(--h1-spacing); text-transform: var(--h1-transform); text-wrap: balance; }
h2 { font: var(--h2-weight) var(--h2-size)/1.25 var(--font-head); margin: 0 0 4px; letter-spacing: var(--h2-spacing); text-transform: var(--h2-transform); color: var(--accent-ink); }
:root:not([data-brand="shark"]) h2 { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: transparent; width: fit-content; max-width: 100%; }
h3 { font: 700 15.5px/1.3 var(--font-head); margin: 0; letter-spacing: -0.005em; text-transform: var(--title-transform); }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-ink); font-weight: 700; margin: 0 0 10px;
  display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--brand); flex: none; }
.lede { color: var(--ink-2); margin: 6px 0 20px; max-width: 72ch; font-size: 15.5px; text-wrap: pretty; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); min-width: 0; }
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.card-head .small { margin-top: 3px; }
.small { font-size: 13px; color: var(--ink-2); }
.muted { color: var(--muted); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid2 > .card + .card { margin-top: 0; }
@media (max-width: 760px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  section { padding-top: 32px; }
  :root { --h1-size: 32px; --h2-size: 17px; }
  .card { padding: 16px; }
}

/* ------------------------------------------------------------------ buttons */
.cta { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 15px/1 var(--font-head); padding: 14px 20px;
  border-radius: var(--radius-sm); background: var(--cta-bg); color: var(--cta-ink); border: 1px solid transparent; cursor: pointer;
  text-transform: var(--nav-transform); letter-spacing: var(--nav-spacing); transition: background-color 0.15s, transform 0.15s; }
.cta:hover { background: var(--cta-bg-hover); }
.cta::after { content: ""; width: 16px; height: 16px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9h10M9.5 4.5 14 9l-4.5 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9h10M9.5 4.5 14 9l-4.5 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.cta.ghost { background: transparent; color: var(--hero-ink); border-color: rgba(255, 255, 255, 0.35); }
.cta.ghost:hover { border-color: var(--hero-ink); background: rgba(255, 255, 255, 0.06); }
.cta.light { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.cta.light:hover { border-color: var(--brand); color: var(--accent-ink); }
.cta.noarrow::after { display: none; }

/* ------------------------------------------------------------------ footer */
.foot { background: var(--foot-bg); color: var(--foot-ink); margin-top: 64px; font-size: 13.5px; }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding-top: 28px; padding-bottom: 32px; }
.foot .fb { display: flex; align-items: center; gap: 12px; color: var(--foot-ink-strong); font-weight: 600; }
.foot .fb .logo { width: var(--logo-w); height: var(--logo-h); background: var(--logo) no-repeat left center / contain; flex: none; }
.foot .fl { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: var(--foot-ink); text-decoration: none; }
.foot a:hover { color: var(--foot-ink-strong); }
.foot .credit { display: inline-flex; align-items: center; gap: 8px; }
.foot .credit img { height: 13px; width: auto; opacity: 0.8; }

/* ------------------------------------------------------------------ data components */
.tip { position: fixed; z-index: 50; pointer-events: none; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 11px; font-size: 12.5px; line-height: 1.45; box-shadow: var(--shadow-3); max-width: 280px; }
.tip strong { font-weight: 700; }
.tip .row { display: flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.key.line { height: 2px; width: 12px; border-radius: 1px; }
.key.dot { border-radius: 50%; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 18px 16px 16px; min-width: 0; box-shadow: var(--shadow); }
.tile::before { content: ""; position: absolute; left: 16px; top: -1px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }
.tile .lab { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.3; }
.tile .val { font: 800 30px/1.1 var(--font-head); letter-spacing: -0.025em; margin: 8px 0 4px; font-variant-numeric: lining-nums; }
.tile .val small { font: 600 14px var(--font); color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.tile .sub { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
button.tile { text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
button.tile:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); box-shadow: var(--shadow-2); transform: translateY(-1px); }
button.tile .sub { color: var(--link); font-weight: 500; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 4px 12px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 500; cursor: pointer;
  color: var(--ink-2); min-height: 30px; transition: background-color 0.15s, color 0.15s; }
.seg button:hover:not(:disabled):not(.on) { color: var(--ink); background: var(--surface); }
.seg button.on { background: var(--sel); color: var(--sel-ink); font-weight: 600; box-shadow: var(--sel-shadow); }
.seg button:disabled { opacity: 0.4; cursor: not-allowed; }
.btn { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-xs); padding: 4px 11px; font-size: 13px; font-weight: 500;
  cursor: pointer; min-height: 34px; min-width: 38px; transition: border-color 0.15s, color 0.15s; }
.btn:hover { border-color: var(--brand); color: var(--accent-ink); }
select { font: inherit; font-size: 13px; color: var(--ink); background-color: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  padding: 4px 8px; min-height: 32px; max-width: 100%; }
.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 14px; }
.filters label { font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
input[type=range] { accent-color: var(--brand-600); }
.empty { border: 1.5px dashed var(--axis); border-radius: var(--radius-md); padding: 20px; color: var(--ink-2); font-size: 14px; background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-weight: 700; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 10px;
  border-bottom: 1px solid var(--border-strong); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.scroll-x { overflow-x: auto; }
svg text { fill: var(--ink-2); font: 11px var(--font); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.av { display: inline-block; flex: none; border-radius: 50%; overflow: hidden; background: var(--surface-2); vertical-align: middle;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ring, var(--axis)); margin: 4px; }
.av.sm { box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--ring, var(--axis)); margin: 3px; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* video box (report, tracking, calls) */
.vbox { position: relative; background: #000; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 9; }
.vbox video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.vbox .vwait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.vbox .vwait.on { opacity: 1; transition-delay: 0.35s; }
.vbox .vwait::after { content: ""; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: pbspin 0.9s linear infinite; }
@keyframes pbspin { to { transform: rotate(360deg); } }
.transport { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.transport .play { min-width: 76px; font-weight: 700; background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.transport .play:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.transport input[type=range] { flex: 1 1 140px; min-width: 120px; }
.readout { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }