/* Sweetspot brand: the one shared design system for the landing page, the guides, admin, the share images, the ads
   and the videos. Tokens, the font from our own server, and the components more than one surface uses.
   Surface files (landing.css, guides/guide.css, admin/admin.css) only lay things out and add what is theirs.
   The :root block below is the one source of the tokens. What is drawn outside the site reads it too:
   lib/brand-tokens.cjs (share images, ads, og images) and marketing-video/brag/brand.py (the videos).
   Keep it one --name: value; per line. The rules and the reasons are in /DESIGN.md at the repo root.
   Change a token here first, then there (test/design-tokens.test.js checks that the two agree). */

/* ---------- Tokens (retning A, chosen by Markus 31 October 2026) ----------
   Contrast is against --white, the surface everything sits on, rounded down, as /admin/#design computes it. */
:root {
  /* Retning A: the colours of the site, the guides and admin, and of the ads */
  --sky: #0593C6;        /* Sky Blue, the system: lines, paths, links on dark. White on sky is 3.4:1, so never small white text */
  --sky-deep: #046E96;   /* behind small white text, 5.6:1 */
  --sky-ink: #04729B;    /* sky as small text on white, 5.3:1 */
  --sky-tint: #E7F5FB;
  --sky-light: #19A6DA;  /* the top of the sky gradient: the hero, the blue bands, the og images */
  --sky-night: #033C54;  /* the shadow under white text on blue, and the dark of the glass-style videos */
  --white: #FCFFFF;      /* White, the content */
  --ink: #08202C;        /* text on white, 16.6:1 */
  --ink-2: #3C5A6B;      /* secondary text on white, 7.2:1 */
  --line: rgba(8, 32, 44, 0.12);
  --pink: #D83995;       /* Hot Pink, the one accent per view. White on pink 4.2:1, so button text is bold 19 px */
  --pink-press: #C42D85;
  --error: #B3261E;      /* text and «Claude ulik fasit», nothing else */
  --error-tint: #FBEAEA;
  --fill: rgba(8, 32, 44, 0.06); /* quiet neutral fill: the neutral badge, an image before it has loaded */
  --video-bg: #0A2A3A;   /* dark under video and stills, so letterboxing never shows white */
  --star: #F5B700;       /* the 1–5 rating star in admin, nothing else */

  /* The shot map and the ads (design/delingsbilder/, guides/ballbane.js) */
  --navy: #071B26;       /* the dark background of share images and ads */
  --navy-top: #0C2230;   /* the plain dark behind photos (round 4): --navy-top, --navy, --navy-deep */
  --navy-deep: #05131B;
  --black: #0D1114;      /* the near black behind photos (round 4): --black-top, --black, --black-deep */
  --black-top: #171C20;
  --black-deep: #090C0E;
  --sky-line: #8FD3EE;   /* the ball path and small labels on dark */
  --pink-soft: #F1A9CF;  /* a goal that is not in a top corner, in the shot map */
  --pink-ink: #5C0F3A;   /* the number on --pink-soft */
  --pink-on-dark: #FF7CC4; /* the one highlighted word on a dark ad */

  /* The skeleton over the player, drawn the same in admin and in the ads: left side, right side, white middle */
  --pose-left: #60C8FF;
  --pose-right: #FFAA46;

  /* Video A, the first videos' colours (Markus 30 October). The videos keep them for now (DECISIONS.md, 31 October).
     Not used by the site */
  --video-blue: #0B5CD5;
  --video-line: #5B9BFF;
  --video-stand: #BF5AF2; /* the standing foot */
  --video-navy: #06101F;

  /* Type, corners, spacing, motion and depth */
  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* token names and code, on the design page in admin (/admin/#design) */
  --text-display: clamp(2.6rem, 11.5vw, 5rem);  /* the hero headline: 700, line-height 0.96, -0.035em */
  --text-headline: clamp(1.9rem, 7.5vw, 3rem);  /* a section's heading: 700, line-height 1.02, -0.03em */
  --text-title: 1.0625rem;                       /* a card's title: 700 */
  --text-body: 1.0625rem;                        /* body text: 400, line-height 1.5 */
  --text-label: 0.75rem;                         /* chips, badges and small labels: 600, uppercase, +0.06em */
  --text-button: 1.1875rem;                      /* the main button: 700, bold 19 px holds white on pink */
  --radius: 18px;
  --radius-control: 14px;
  --radius-video: 22px;
  --radius-glass: 24px;
  --radius-pill: 99px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lift: 0 1px 2px rgba(8, 32, 44, 0.05), 0 6px 16px -6px rgba(8, 32, 44, 0.1), 0 28px 56px -22px rgba(4, 110, 150, 0.32);
  --glow-pink: 0 14px 30px -12px rgba(216, 57, 149, 0.85); /* under the pink button: how it holds against blue */
  --glow-mark: 0 18px 36px -16px rgba(216, 57, 149, 0.9);  /* under the pink word in a headline */
  color-scheme: light;
}

/* Schibsted Grotesk, served from this site so no visitor's address goes to a font CDN (SIL OFL 1.1, /fonts/OFL.txt) */
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fonts/schibsted-grotesk-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;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font: 400 var(--text-body)/1.5 var(--font);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img, svg, canvas, video { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
::selection { background: var(--sky-tint); color: var(--ink); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
/* hidden means hidden, even on elements that set their own display (31 October: the parent's box showed for everyone) */
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* One left-aligned column. Everything on a screen starts at the same left edge: the logo, the heading, the cards. */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }

/* ---------- The ribbed glass with the pink glow ----------
   Under the live hero canvas on the landing page, and the whole background of the admin login.
   Put .hero-fallback and .hero-scrim as the first children of a position: relative; isolation: isolate box. */
.hero-fallback {
  position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 1px, rgba(255,255,255,0) 1px 9px, rgba(3,60,90,0.10) 9px 11px),
    radial-gradient(40% 30% at 70% 52%, rgba(216,57,149,0.85), rgba(216,57,149,0) 70%),
    radial-gradient(28% 36% at 74% 40%, rgba(8,40,86,0.85), rgba(8,40,86,0) 70%),
    linear-gradient(180deg, var(--sky-light) 0%, var(--sky) 45%, var(--sky-deep) 100%);
}
/* darkens the bottom, where the white text and the glass card sit */
.hero-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(3, 74, 102, 0.72) 0%, rgba(3, 74, 102, 0.38) 38%, rgba(3, 74, 102, 0) 64%); }

/* ---------- The logo mark and the chip ---------- */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 44px; height: 44px; }
.chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 1px solid rgba(252, 255, 255, 0.55); font-size: var(--text-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 22px;
  border: 0; border-radius: var(--radius-control); font: 700 var(--text-button)/1 var(--font); letter-spacing: -0.01em; cursor: pointer;
  text-decoration: none; transition: transform 0.12s ease, background-color 0.12s ease;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.btn:active { transform: scale(0.98); }
/* the one pink thing in a view: it glows, so it pops against the blue even though pink and sky are about as light */
.btn-pink { background: var(--pink); color: var(--white); width: 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), var(--glow-pink); }
.btn-pink:active { background: var(--pink-press); }
.btn-quiet { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
@media (hover: hover) { .btn-pink:hover { background: var(--pink-press); } }
.btn[disabled] { opacity: 0.7; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ---------- Fields ---------- */
.input {
  width: 100%; min-height: 54px; padding: 0 16px; border-radius: var(--radius-control); border: 1.5px solid var(--line);
  background: #F3F8FA; color: var(--ink); font: 500 var(--text-body) var(--font);
}
.input:focus { outline: none; border-color: var(--sky); background: var(--white); }
.input[aria-invalid="true"] { border-color: var(--error); }
.err { color: var(--error); font-size: 0.875rem; padding-inline: 8px; }

/* ---------- The glass card with the handle ----------
   Frosted glass over the ribbed background. It sits low, over the darkest part of the scrim, so white text stays readable. */
.glass {
  position: relative; display: grid; gap: 10px; padding: 22px 12px 12px; border-radius: var(--radius-glass); color: var(--white);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 24px 48px -24px rgba(2, 40, 60, 0.6);
}
.glass::before { content: ""; position: absolute; top: 9px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(255, 255, 255, 0.6); }
.glass .input { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.34); color: var(--white); }
.glass .input::placeholder { color: rgba(252, 255, 255, 0.8); }
.glass .input:focus { background: rgba(255, 255, 255, 0.24); border-color: var(--white); }
.glass .input[aria-invalid="true"] { border-color: #FFC2E1; }
/* the error sits on white, so it reads as an error and not as a hint (it was near-white on the glass, 3:1) */
.glass .err { justify-self: start; padding: 6px 10px; border-radius: 10px; background: var(--white); color: var(--error); font-weight: 600; }
/* on blue the pink focus ring is as light as the sky (1.2:1), so it turns white, and the field gets a white ring */
.glass :focus-visible { outline-color: var(--white); }
.glass .input:focus { box-shadow: 0 0 0 2px var(--white); }

/* ---------- Cards ---------- */
.card { display: grid; align-content: start; gap: 14px; padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--white); }
/* lifted the way Apple lifts a product card: a hairline, a tight contact shadow and a wide soft one */
.card-lifted { border-color: rgba(8, 32, 44, 0.06); box-shadow: var(--lift); }

/* ---------- Badges with fixed meanings ----------
   .badge          neutral fact (batch, «ikke vurdert»)
   .badge.truth    checked by a coach: the fasit
   .badge.claude   Claude's assessment, not checked by a coach (dashed: not yet solid)
   .badge.differs  Claude differs from the fasit. The only red in the system
   Pink is never a badge: it belongs to the goal drawing and the one main button. */
.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 9px; border-radius: var(--radius-pill);
  font-size: var(--text-label); font-weight: 600; line-height: 1.2; background: var(--fill); color: var(--ink-2); }
.badge.truth { background: var(--sky-tint); color: var(--sky-ink); }
.badge.claude { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(60, 90, 107, 0.45); }
.badge.differs { background: var(--error-tint); color: var(--error); }

/* ---------- The sheet from below (a dialog) ----------
   From below on the phone, centred from 700 px. Put a .grab handle first if it can be dragged in spirit. */
dialog.sheet {
  width: min(100%, 560px); max-width: 100%; max-height: 92svh; margin: auto auto 0; padding: 0; border: 0;
  border-radius: 24px 24px 0 0; background: var(--white); color: var(--ink); overflow: auto;
}
dialog.sheet::backdrop { background: rgba(4, 30, 42, 0.55); }
@media (min-width: 700px) { dialog.sheet { margin: auto; border-radius: 24px; } }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 8px auto 0; }

/* ---------- The goal as a drawing (site/goal.js) ----------
   3 × 3 zones seen from the shooter. Pink marks where the ball went: the one pink thing on a card. */
.goal { width: 76px; height: auto; overflow: visible; flex: none; }
.goal-large { width: 96px; }
.goal .cell { fill: var(--sky-tint); stroke: rgba(4, 114, 155, 0.18); stroke-width: 1; }
.goal .hit, .goal .ball { fill: var(--pink); }
.goal .frame { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.goal.g-none .cell { fill: rgba(8, 32, 44, 0.04); }
/* on a dark or blue surface */
.on-dark .goal .cell { fill: rgba(255, 255, 255, 0.18); stroke: rgba(255, 255, 255, 0.3); }
.on-dark .goal .frame { stroke: var(--white); }

/* ---------- The video frame ----------
   Portrait 9:16 like the phone filmed it, dark under the video so letterboxing never shows white. */
.video-frame { position: relative; border-radius: var(--radius-video); overflow: hidden; aspect-ratio: 9 / 16; width: 100%; background: var(--video-bg);
  box-shadow: 0 1px 2px rgba(8, 32, 44, 0.06), 0 8px 20px -8px rgba(8, 32, 44, 0.16), 0 36px 72px -28px rgba(4, 110, 150, 0.45); }
.video-frame video, .video-frame img { width: 100%; height: 100%; object-fit: cover; }
.video-frame.landscape { aspect-ratio: 16 / 9; }