/*
  The brand's foundation, shared by the fan app and the clubs' back office: tokens, base styles,
  type, buttons, chips, cards, notes and form fields. Each app adds its own sheet on top (fan.css,
  staff.css) for what only it has.

  Tokens are the brand guide's (docs/brand-guide.md, §3) and nothing else. The scanner's status
  colours are not here and must never be: BrandRulesTests fails the build if they appear outside the
  scanner. Class names start with f- for "foundation".
*/

:root {
  --brand-50: #E3F2EA;
  --brand-500: #0A7A4C;
  --brand-600: #086640;
  --brand-700: #075C39;
  --ink-900: #101512;
  --ink-600: #4A544D;
  --ink-450: #5A645C;
  --ink-400: #69736B;
  --hairline: #C3CCC6;
  --ink-on-dark: rgba(255, 255, 255, 0.65);
  --surface: #F5F8F6;
  --surface-2: #E7EDE9;
  --card: #FFFFFF;
  --line: rgba(16, 21, 18, 0.09);

  --radius-card: 20px;
  --radius-ctrl: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16, 21, 18, 0.04), 0 22px 44px -32px rgba(16, 21, 18, 0.24);

  --font-display: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;
  --font-ui: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: 16px;
  --sticky-height: 0px;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

/* Classes that set display must not win over the attribute that hides. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-900);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }

a { color: var(--brand-700); }
a:hover { color: var(--ink-900); }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }

:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; }

img, svg { display: block; }

.nums { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.f-plain { list-style: none; margin: 0; padding: 0; }

.f-skip {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  padding: 10px 14px; border-radius: var(--radius-ctrl);
  background: var(--card); color: var(--ink-900); font-weight: 700;
}
.f-skip:focus { top: 8px; }

/* ---------------------------------------------------------------- layout */

.f-page { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.f-narrow { max-width: calc(720px + 2 * var(--gutter)); }
main.f-page { padding-block: 24px 48px; min-height: 60vh; }
.f-stack { display: flex; flex-direction: column; gap: 28px; }
.f-stack-sm { display: flex; flex-direction: column; gap: 12px; }

/* ------------------------------------------------------------------ type */

.f-h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 22.4px + 1.5vw, 36px);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.03em;
}
.f-h2 {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
}
.f-h3 { font-size: 17px; font-weight: 700; line-height: 1.3; }
.f-body { color: var(--ink-600); }
.f-muted { color: var(--ink-400); }
.f-strong { font-weight: 700; color: var(--ink-900); }
.f-hint { font-size: 14px; color: var(--ink-400); }
.f-center { text-align: center; }

.f-link { color: var(--brand-700); font-weight: 600; text-underline-offset: 3px; }
.f-link-button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--brand-700); font-weight: 600;
}
.f-link-button:hover { color: var(--ink-900); }

/* --------------------------------------------------------------- buttons */

.f-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--radius-ctrl);
  font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.f-btn--primary { background: var(--brand-500); color: #FFFFFF; }
.f-btn--primary:hover { background: var(--brand-600); color: #FFFFFF; }
.f-btn--outline { background: var(--card); border-color: var(--hairline); color: var(--ink-900); }
.f-btn--outline:hover { border-color: var(--ink-900); color: var(--ink-900); }
.f-btn--lg { min-height: 56px; font-size: 17px; }
.f-btn--small { min-height: 40px; padding: 0 14px; font-size: 14px; }
.f-btn--block { display: flex; width: 100%; }
.f-btn:disabled { opacity: 0.5; }

.f-icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--hairline); border-radius: var(--radius-ctrl);
  background: var(--card); color: var(--ink-900);
}
.f-icon-btn:disabled { opacity: 0.35; }

.f-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.f-chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  background: var(--card); color: var(--ink-900);
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.f-chip:hover { border-color: var(--ink-900); color: var(--ink-900); }
.f-chip--on, .f-chip--on:hover { background: var(--ink-900); border-color: var(--ink-900); color: #FFFFFF; }

/* Segmented control: links or radio labels. */
.f-seg {
  display: inline-flex; gap: 4px; margin: 0; padding: 4px;
  border: 0; border-radius: var(--radius-ctrl); background: var(--surface-2);
}
.f-seg legend { padding: 0; margin-bottom: 8px; }
.f-seg--wide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.f-seg--wide legend { grid-column: 1 / -1; float: left; width: 100%; }
.f-seg__item {
  position: relative; display: grid; place-items: center;
  min-height: 40px; padding: 0 14px; border-radius: 9px;
  color: var(--ink-450); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.f-seg__item:hover { color: var(--ink-900); }
.f-seg__item--on { background: var(--card); color: var(--ink-900); }
.f-seg__item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.f-seg__item:has(input:checked) { background: var(--ink-900); color: #FFFFFF; }
.f-seg__item:has(input:focus-visible) { outline: 3px solid var(--brand-500); outline-offset: 2px; }

/* ----------------------------------------------------------------- cards */

.f-card {
  padding: 20px; border-radius: var(--radius-card);
  background: var(--card); box-shadow: var(--shadow-card);
}
.f-card--flat { box-shadow: none; border: 1px solid var(--line); }

.f-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius-ctrl);
  background: var(--brand-50); color: var(--ink-900); font-size: 15px;
}
.f-note--done svg { color: var(--brand-700); flex: none; margin-top: 3px; }
.f-error {
  padding: 12px 14px; border-radius: var(--radius-ctrl);
  border: 1px solid var(--ink-900); background: var(--card); color: var(--ink-900); font-size: 15px;
}
.f-confirm { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-900); }
.f-confirm svg { color: var(--brand-700); }
.f-tag {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink-450); font-size: 13px; font-weight: 600;
}

.f-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px 0; }
.f-busy { text-align: center; color: var(--ink-600); }
.f-skeleton { background: linear-gradient(90deg, var(--card), var(--surface-2), var(--card)); background-size: 200% 100%; animation: f-shimmer 1.4s ease infinite; }
@keyframes f-shimmer { to { background-position: -200% 0; } }

.f-row-actions { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }

/* Sponsor band (Web.Core Ui/SponsorBand.razor). One slot for every logo — 40 px high (32 on a
   phone), at most 140 px wide, scaled to fit — on a white well, so different shapes read as one band.
   Always one row of equal columns, never wrapping: a sponsor left alone on a second line reads as
   the lesser one, and three always fit (on a narrow phone the slot narrows rather than breaking). */
.f-sponsors { display: flex; flex-direction: column; gap: 8px; }
.f-sponsors__label {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-400);
}
.f-sponsors__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; gap: 16px;
  margin: 0; padding: 12px 16px; list-style: none;
  border: 1px solid var(--line); border-radius: var(--radius-ctrl); background: #FFFFFF;
}
.f-sponsors__item { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 32px; }
.f-sponsors__link { display: flex; align-items: center; justify-content: center; max-width: 100%; color: var(--ink-900); text-decoration: none; }
.f-sponsors__link:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 3px; border-radius: 4px; }
.f-sponsors__logo { display: block; width: auto; height: 32px; max-width: min(112px, 100%); object-fit: contain; }
.f-sponsors__name { font-size: 15px; font-weight: 700; line-height: 1.25; text-align: center; overflow-wrap: anywhere; color: var(--ink-900); }
@media (min-width: 720px) {
  .f-sponsors__item { min-height: 40px; }
  .f-sponsors__list { gap: 24px; }
  .f-sponsors__logo { height: 40px; max-width: min(140px, 100%); }
}

/* A match's own sponsor (Web.Core Ui/MatchSponsor.razor), "präsentiert von": one logo, larger than
   the band's — 64 px high (48 on a phone), at most 240 px wide — on the same white well. */
.f-presented {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 16px 16px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-ctrl); background: #FFFFFF;
}
.f-presented__label {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-400);
}
.f-presented__link { display: flex; justify-content: center; max-width: 100%; color: var(--ink-900); text-decoration: none; }
.f-presented__link:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 3px; border-radius: 4px; }
.f-presented__logo { display: block; width: auto; height: 48px; max-width: min(200px, 100%); object-fit: contain; }
.f-presented__name {
  font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2;
  overflow-wrap: anywhere; color: var(--ink-900);
}
@media (min-width: 720px) {
  .f-presented__logo { height: 64px; max-width: min(240px, 100%); }
}

/* Wordmark (Web.Core Brand/Wordmark.razor) */
.wordmark { display: inline-flex; align-items: center; }
.wordmark__name { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }

/* ----------------------------------------------------------------- forms */

.f-label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-900); }
.f-input, .f-select {
  display: block; width: 100%; min-height: 48px; margin-top: 6px; padding: 0 14px;
  border: 1px solid var(--hairline); border-radius: var(--radius-ctrl);
  background: var(--card); font-size: 16px; font-weight: 400;
}
.f-input:hover, .f-select:hover { border-color: var(--ink-450); }
.f-input[aria-invalid="true"] { border-color: var(--ink-900); border-width: 2px; }
.f-select { margin-top: 0; padding-right: 36px; }
.f-field { display: flex; flex-direction: column; }
.f-field + .f-field { margin-top: 16px; }
.f-field__hint { margin-top: 6px; font-size: 14px; color: var(--ink-400); }
.f-field__error { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--ink-900); }
.f-form { display: flex; flex-direction: column; gap: 4px; }
.f-form .f-h3 { margin-bottom: 2px; }
.f-form .f-body { margin-bottom: 14px; }

/* ---------------------------------------------------------- preferences */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}