/*
  The website's shared styles (the homepage and the clubs page, behind the homepage
  switch: app/site.py), from the demos' theme (docs/mockups/theme.css).

  THE BRAND LIVES HERE: yellow, black, white and greys, with a little blue (the user,
  2026-10-09). To rebrand every demo, change the tokens in the three :root blocks below.
  What each one is for:
    --accent / --accent-ink   the yellow (the ball, Save, highlights, the logo) / text on it
    --brand / --on-brand      fills that carry text: buttons, avatars, cards (black; dark
                              grey in dark mode) / the text on them (white)
    --brand-deep              the far end of a --brand gradient
    --brand-soft              a pale yellow tint behind icons and selected items
    --brand-ink               brand-coloured text, lines, bars on the page (black; yellow
                              in dark mode)
    --blue                    the little blue: links and the verified mark (the drawn
                              courts are padel blue too)
  The font is Archivo.
*/
:root{
  /* brand */
  --brand:#111111; --brand-deep:#2E2E33; --brand-soft:#FFF5C7; --on-brand:#FFFFFF;
  --brand-ink:#111111; --blue:#1F5FD6;
  --accent:#FFD21F; --accent-ink:#111111;
  /* neutrals: warm greys */
  --bg:#F2F2EF; --surface:#FFFFFF; --surface-2:#F7F7F4; --ink:#111111; --muted:#66666C;
  --line:#E0E0DB; --glass:#0D0D0E; --on-glass:#FFFFFF;
  --win:#16A34A; --loss:#DC2626; --warn:#B45309;
  --src-recorded:#2563EB; --src-verified:#16A34A; --src-claimed:#B45309; --src-self:#77777D;
  --shadow:0 10px 30px -18px rgba(0,0,0,.35);
  /* type */
  --font:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --radius:16px; --radius-s:10px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:#3A3A3F; --brand-deep:#1C1C1F; --brand-soft:#2A2614; --on-brand:#FFFFFF;
    --brand-ink:#FFD21F; --blue:#7AA7FF;
    --accent:#FFD21F; --accent-ink:#111111;
    --bg:#0B0B0C; --surface:#18181A; --surface-2:#121214; --ink:#F4F4F1; --muted:#A3A3A8;
    --line:#2C2C30; --glass:#000000; --on-glass:#FFFFFF;
    --win:#3CCB7F; --loss:#F26B6B; --warn:#F0B44C;
    --src-recorded:#7AA7FF; --src-verified:#3CCB7F; --src-claimed:#F0B44C; --src-self:#A3A3A8;
    --shadow:0 10px 30px -18px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --brand:#3A3A3F; --brand-deep:#1C1C1F; --brand-soft:#2A2614; --on-brand:#FFFFFF;
  --brand-ink:#FFD21F; --blue:#7AA7FF;
  --accent:#FFD21F; --accent-ink:#111111;
  --bg:#0B0B0C; --surface:#18181A; --surface-2:#121214; --ink:#F4F4F1; --muted:#A3A3A8;
  --line:#2C2C30; --glass:#000000; --on-glass:#FFFFFF;
  --win:#3CCB7F; --loss:#F26B6B; --warn:#F0B44C;
  --src-recorded:#7AA7FF; --src-verified:#3CCB7F; --src-claimed:#F0B44C; --src-self:#A3A3A8;
  --shadow:0 10px 30px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* fonts, served from /static (no external requests): Archivo (Latin, its widths and
   weights), Cairo (Arabic) */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;
  src:url(/static/fonts/archivo-latin.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}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;
  src:url(/static/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/static/fonts/cairo-arabic.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* Arabic (site-i18n.js): right to left, Cairo; letter-spacing breaks joined letters;
   taller title lines, and the yellow marker raised to sit behind the words */
html[lang=ar] body,html[lang=ar] button,html[lang=ar] input,html[lang=ar] select,html[lang=ar] textarea{font-family:'Cairo','Archivo',system-ui,sans-serif}
html[lang=ar] *{letter-spacing:0!important}
html[lang=ar] .display,html[lang=ar] h1,html[lang=ar] h2{line-height:1.25}
/* A32: in Arabic the band sits under the letters (their dots and lower strokes reach below
   the line), thinner, with taller lines so it never touches the next line */
html[lang=ar] h1 em,html[lang=ar] h2 em{background-position-y:100%!important;background-size:100% calc(.12em + 4px)!important}
html[lang=ar] h1:has(em),html[lang=ar] h2:has(em){line-height:1.5}
.lang-switch{font:inherit;font-family:'Cairo','Archivo',sans-serif;font-weight:900;font-size:13px;color:inherit;background:none;border:1.5px solid currentColor;border-radius:99px;padding:2px 11px;line-height:1.4}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
html{scrollbar-color:var(--line) transparent}
*{scrollbar-width:thin}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.1}
.display{font-stretch:72%;font-weight:900;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* The logo: the wordmark alone (the user, 2026-10-12): heavy italic Archivo in the
   brand's yellow. On a light background a thin black outline keeps it readable; on a
   dark one it is plain yellow. The old ball mark (<i> inside .logo) is hidden. */
.logo{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-stretch:78%;font-size:28px;letter-spacing:-.01em;line-height:1;color:var(--accent);text-decoration:none}
.logo{text-shadow:-1.2px -1.2px 0 #111,1.2px -1.2px 0 #111,-1.2px 1.2px 0 #111,1.2px 1.2px 0 #111,0 -1.4px 0 #111,0 1.4px 0 #111,-1.4px 0 0 #111,1.4px 0 0 #111}
.logo .muted{text-shadow:none}
.logo>i{display:none!important}
/* the wordmark's sizes on the homepage and the clubs page (the user, 2026-10-13: a bit larger) */
.logo.top{font-size:clamp(38px,4vw,44px)}
.logo.foot{font-size:30px}
/* The wordmark in text (site-i18n.js wraps the name in .bw): heavy italic Archivo; in
   titles a yellow marker stroke behind it; on dark backgrounds the word itself yellow. */
.logo{font-style:italic}
.bw{font-family:'Archivo',system-ui,sans-serif;font-style:italic;font-weight:900;letter-spacing:-.01em;padding-inline:.03em .08em}
.bw-title{background:linear-gradient(transparent 60%,var(--accent) 60%,var(--accent) 90%,transparent 90%);padding-inline:.06em .12em}
.bw-dark{color:var(--accent);background:none}
.logo i{width:22px;height:22px;border-radius:50%;background:var(--accent);position:relative;flex:none}
.logo i::before,.logo i::after{content:"";position:absolute;top:4px;bottom:4px;width:7px;border:1.6px solid #fff;border-radius:50%}
.logo i::before{left:-3px;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent}
.logo i::after{right:-3px;border-right-color:transparent;border-top-color:transparent;border-bottom-color:transparent}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:10px 16px;border-radius:12px;font-weight:700;font-size:14px;transition:transform .1s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{color:var(--loss)}
.btn.small{padding:6px 11px;font-size:13px;border-radius:99px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:default}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-size:12px;font-weight:700;white-space:nowrap}
.chip[aria-pressed="true"],.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.seg{display:inline-flex;padding:3px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line)}
.seg button{border:0;background:none;padding:6px 14px;border-radius:99px;font-weight:700;font-size:13px;color:var(--muted)}

/* where a number comes from (docs/future/player-profile.md) */
.src{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.src::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.src.recorded{color:var(--src-recorded)} .src.verified{color:var(--src-verified)}
.src.claimed{color:var(--src-claimed)} .src.self{color:var(--src-self)}

/* avatars: initials by default (decided), a photo optional */
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--brand);color:var(--on-brand);font-weight:800;font-size:13px}
.av.big{width:76px;height:76px;font-size:26px}
.av.alt{background:#1F5FD6}.av.alt2{background:#6B6B72}.av.alt3{background:#FFD21F;color:#111}

/* clip thumbnails: a drawn court until real footage (portrait 9:16) */
.thumb{position:relative;aspect-ratio:9/16;max-width:100%;border-radius:12px;overflow:hidden;background:
  linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.25)),
  linear-gradient(90deg,transparent 49.4%,rgba(255,255,255,.8) 49.4%,rgba(255,255,255,.8) 50.6%,transparent 50.6%) 0 22%/100% 56% no-repeat,
  linear-gradient(transparent 21.5%,rgba(255,255,255,.85) 21.5%,rgba(255,255,255,.85) 22.5%,transparent 22.5%,transparent 77.5%,rgba(255,255,255,.85) 77.5%,rgba(255,255,255,.85) 78.5%,transparent 78.5%),
  linear-gradient(transparent 49.3%,rgba(10,22,48,.75) 49.3%,rgba(10,22,48,.75) 50.7%,transparent 50.7%),
  var(--turf,#2B63C6)}
.thumb.pitch{--turf:#1F8A4C;aspect-ratio:16/9}
.thumb::after{content:"";position:absolute;width:9%;aspect-ratio:1;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(255,210,31,.3);left:var(--bx,62%);top:var(--by,34%)}
.thumb .tag{position:absolute;left:6px;bottom:6px;right:6px;display:flex;justify-content:space-between;gap:4px;font-size:10px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.thumb .play{position:absolute;inset:0;display:grid;place-items:center}
.thumb .play i{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center}
.thumb .play i::before{content:"";margin-left:3px;border-left:10px solid var(--glass);border-top:6px solid transparent;border-bottom:6px solid transparent}
.thumb.locked{filter:saturate(.3) brightness(.7)}
.thumb .lock{position:absolute;inset:0;display:grid;place-items:center;font-size:20px}

/* result pills */
.res{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font-size:11px;font-weight:900;color:#fff}
.res.w{background:var(--win)}.res.l{background:var(--loss)}

/* bottom sheets and toasts */
.sheet{position:fixed;inset:0;top:var(--vv-top,0px);bottom:auto;height:var(--vv-h,100%);z-index:50;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none!important}
.sheet>.panel{background:var(--surface);width:100%;max-width:520px;border-radius:22px 22px 0 0;padding:20px 18px calc(env(safe-area-inset-bottom,0px) + 20px);max-height:88vh;max-height:min(88dvh,calc(var(--vv-h,100dvh) - 12px));overflow:auto;display:grid;gap:12px}
.sheet h3{font-stretch:75%;font-weight:900;font-size:24px}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 90px);transform:translate(-50%,16px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:700;font-size:14px;opacity:0;transition:.25s;z-index:80;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.field{display:grid;gap:5px;font-size:13px;font-weight:700}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font-weight:500}

/* the clip from our camera: a drawn padel court seen from behind the glass, in a video
   frame, until real footage replaces it (the user, 2026-10-13: a placeholder for now).
   Drawn by court.js's clipFrame(); used by home.html and for-clubs.html. */
.clip{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0B1220;color:#fff;box-shadow:0 30px 60px -32px rgba(0,0,0,.6);isolation:isolate}
.clip svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.clip .ov{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:12px 14px;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 62%,rgba(0,0,0,.6))}
.clip .ov .t{display:flex;justify-content:space-between;align-items:center;gap:8px}
.clip .chipk{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:5px 9px;border-radius:99px;white-space:nowrap}
.clip .chipk.y{background:var(--accent);color:#111}
.clip .chipk.y::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:blinkc 1.4s steps(2) infinite}
.clip .playb{place-self:center;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.6)}
.clip .playb::before{content:"";margin-left:5px;border-left:18px solid #111;border-top:11px solid transparent;border-bottom:11px solid transparent}
.clip .b{display:grid;gap:7px}
.clip .b .cap{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;font-size:12px;font-weight:700;color:#E6E6EA}
.clip .b .cap b{display:block;color:#fff;font-size:14px;font-weight:900;font-stretch:80%}
.clip .prog{height:4px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden}
.clip .prog i{display:block;height:100%;width:0;background:var(--accent);animation:prog 8s linear infinite}
@keyframes prog{to{width:100%}}
@keyframes blinkc{50%{opacity:.25}}
.clip.sm{border-radius:10px;box-shadow:none}
.clip.sm .ov{padding:6px 7px}
.clip.sm .chipk{font-size:7.5px;padding:3px 6px;gap:4px}
.clip.sm .chipk.y::before{width:4px;height:4px}
.clip.sm .playb{width:28px;height:28px}
.clip.sm .playb::before{margin-left:3px;border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
.clip.sm .b .cap,.clip.sm .prog{display:none}
/* The language switch and small buttons: a finger-sized target, same look (the full check) */
.lang-switch,.btn.small{position:relative}
.lang-switch::after{content:"";position:absolute;inset:-10px -4px}
.btn.small::after{content:"";position:absolute;inset:-6px -2px}