/* Matchfixarna – mörkt tema från Aten: varmt svart som glaserad lera, marmorvit
   text, terrakotta och guld, en serif (Fraunces) för rubriker och siffror och
   ett grekiskt meandermönster som enda dekor. Laddas sist av sidornas egna
   stilmallar före kupong.css/historik.css och skriver över färger och
   komponenter i style.css och divisioner.css, så att de filerna kan ändras för
   sig utan att utseendet går förlorat. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..700&display=swap");

/* Medvetet bara mörkt läge. Tokens skrivs utan media-fråga så de vinner över
   båda lägena i style.css. */
:root {
  color-scheme: dark;
  --bg: #0e0d0b;
  --fg: #f3ede3;
  --ink-soft: #d0c6b6;
  --muted: #9d9383;
  --eyebrow: #b8a98f;
  --card: #191714;
  --glass: linear-gradient(180deg, #1b1916, #161411);
  --glass-hi: linear-gradient(180deg, #221f1b, #181613);
  --pill: rgba(243, 237, 227, 0.035);
  --pill-line: rgba(243, 237, 227, 0.13);
  --pill-line-hi: rgba(243, 237, 227, 0.3);
  --border: rgba(243, 237, 227, 0.09);
  --hair: rgba(243, 237, 227, 0.065);
  /* egeiskt blått: länkar, valt läge och hemmalaget */
  --accent: #4d8ff0;
  --accent-deep: #a9c8fb;
  --accent-soft: rgba(77, 143, 240, 0.15);
  --fresh: #3db37c;
  --stale: #e3a33d;
  --down: #f06d5e;
  --unknown: #7d7468;
  --up-soft: rgba(61, 179, 124, 0.15);
  --down-soft: rgba(240, 109, 94, 0.14);
  --side-soft: rgba(227, 163, 61, 0.14);
  --o-home: #4d8ff0;
  --o-draw: #514a41;
  --o-away: #e07a45;
  --c-b: #4d8ff0;
  --c-c: #e07a45;
  /* divisionsfärgerna från divisioner.css, mörka varianten */
  --dv-pl: #3987e5;
  --dv-ch: #d95926;
  --dv-l1: #199e70;
  --dv-l2: #c98500;
  --dv-nl: #d55181;
  --dv-fac: #e0485e;
  --dv-lc: #9b7cf0;
  /* guldet till detaljerna: fokusringen, linjerna och mottot */
  --gold: #d8b06a;
  --gold-hi: #f0d699;
  --gold-grad: linear-gradient(180deg, #f4dfaa, #d3a85d); /* huvudknappar och dina val */
  --terra: #c8643a;
  --bone: #f3ead9;
  --kp-ring: 77, 143, 240;
  --shadow-card: 0 18px 40px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 244, 220, 0.035);
  --shadow-hero: 0 30px 60px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 244, 220, 0.05);
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --serif: var(--display);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* meandern: en period på 12 × 12, ritad i terrakotta */
  --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 10H2V2H10V6H6V10H12' fill='none' stroke='%23c8643a' stroke-width='1.4'/%3E%3C/svg%3E");
  --radius: 12px;
  --maxw: 1120px;
  --gutter: 20px;
  --tab-h: 64px; /* appmenyn i nederkant på mobilen */
}

/* Bakgrunden ligger på html så att den inte upprepas nedåt sidan:
   en svag solnedgång uppe till höger, annars svart glasyr. */
html {
  background: var(--bg) radial-gradient(900px 520px at 88% -10%, rgba(216, 176, 106, 0.1), transparent 65%) no-repeat;
  scrollbar-color: #3a342c transparent;
  scroll-padding-top: 76px; /* under den klistrade toppbaren */
}

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg);
  background: transparent;
}

::selection { background: rgba(216, 176, 106, 0.32); color: #fff; }

a { color: var(--accent-deep); text-decoration-color: rgba(169, 200, 251, 0.35); text-underline-offset: 2px; }
a:hover { color: #fff; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

main, footer {
  max-width: var(--maxw);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
main { padding-top: 8px; padding-bottom: 48px; }

/* ---------- toppbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  max-width: none;
  margin: 0;
  padding: 0;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: inset 0 -1px 0 var(--border);
}
.topbar-inner {
  max-width: var(--maxw);
  min-height: 60px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.brand {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  color: inherit;
  text-decoration: none;
}
.brand:hover { color: inherit; }
.brand .logo {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  box-shadow: 0 6px 16px -4px rgba(200, 100, 58, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s ease;
}
.brand:hover .logo { transform: rotate(-4deg); }
.brand-txt { display: flex; }
.brand-txt b {
  font-family: var(--display);
  font-weight: 650;
  font-size: 22px;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--bone);
}

/* Flikarna är text med en guldlinje under den valda, i toppbarens nederkant. */
.topbar .tabs {
  position: static;
  align-self: stretch;
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  max-width: none;
  margin: 0 0 0 auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.tabs .tablist { display: flex; align-items: stretch; gap: 2px; }

.tabs [role="tab"],
.tabs a.tab-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.15s ease;
}
.tabs [role="tab"]::after,
.tabs a.tab-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.tabs [role="tab"]:hover,
.tabs a.tab-link:hover { color: var(--fg); background: none; }
.tabs [role="tab"][aria-selected="true"],
.tabs a.tab-link[aria-current="page"] { color: var(--bone); background: none; box-shadow: none; }
.tabs [role="tab"][aria-selected="true"]::after,
.tabs a.tab-link[aria-current="page"]::after { transform: scaleX(1); }
.tabs [role="tab"]:focus-visible,
.tabs a.tab-link:focus-visible { outline-offset: -6px; }

/* ---------- hjälte (förstasidan, ovanför kupongen) ---------- */

.hero {
  position: relative;
  margin-bottom: 26px;
  padding: clamp(26px, 4.5vw, 60px) 0 clamp(34px, 4vw, 52px);
  isolation: isolate;
}
.hero[hidden] { display: none; }
/* meanderbården som avslutar hjälten */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background: var(--meander) repeat-x 0 50% / 14px 14px;
  opacity: 0.6;
}

.hero-title {
  margin: 0;
  padding-top: 0.02em;
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(56px, 8.8vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--bone);
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.hero-motto {
  width: fit-content;
  margin: clamp(14px, 2vw, 22px) 0 8px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--gold-hi);
}

/* lagbilden som ett polaroidfoto: litet bredvid texten på mobilen, stort till
   höger på breda skärmar */
.team-photo {
  margin: 0;
  background: #f1e9db;
  border-radius: 3px;
  box-shadow: 0 34px 60px -26px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.team-photo a { display: block; }
.team-photo img { display: block; width: 100%; height: auto; }
.team-photo-sm {
  width: 92px;
  margin: 12px 2px 0 0;
  padding: 4px 4px 13px;
  transform: rotate(3deg);
}
.hero-aside { display: none; }

/* smala skärmar: fotot bredvid mottot, utan glapp under */
@media (max-width: 899px) {
  .hero-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
    align-items: start;
  }
  .hero-title { grid-column: 1 / -1; }
  .hero-lede { display: contents; }
  .hero-motto { grid-column: 1; grid-row: 2; }
  .team-photo-sm { grid-column: 2; grid-row: 2; }
}

/* breda skärmar: den stora lagbilden till höger om rubriken */
@media (min-width: 900px) {
  .hero { display: flex; align-items: center; gap: clamp(40px, 6vw, 88px); }
  .hero-main { flex: 1 1 auto; min-width: 0; }
  .team-photo-sm { display: none; }
  .hero-aside {
    display: block;
    flex: none;
    margin: 0 clamp(8px, 3vw, 48px) 0 0;
  }
  .team-photo-lg {
    width: clamp(190px, 18vw, 232px);
    padding: 10px 10px 34px;
    transform: rotate(2deg);
  }
}

/* ---------- rubriker ---------- */

.page-title {
  margin: clamp(18px, 3vw, 34px) 0 24px;
  padding-top: 0.05em;
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(36px, 5vw, 54px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--bone);
}

h3 {
  margin: 40px 0 14px;
  padding-top: 0;
  border-top: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bone);
}
h3 .hint,
h3 .phase-tag {
  font-family: var(--sans);
  letter-spacing: 0;
  vertical-align: 3px;
}
h3 .hint { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 8px; }
.page-title + h3, .intro + h3, .legend + h3 { margin-top: 18px; }
/* Utvärderingen sist på Modell-sidan; #utvardering rullar hit, under toppbaren */
.eval-title { margin-top: 72px; scroll-margin-top: 84px; }
h4.sub-h { font-size: 14px; color: var(--ink-soft); }

.intro { color: var(--ink-soft); font-size: 15px; max-width: 62ch; }
.legend { color: var(--muted); font-size: 13px; line-height: 1.55; }
.hint { color: var(--muted); }

/* ---------- reglage ---------- */

button {
  border: 1px solid var(--pill-line);
  border-radius: 11px;
  background: var(--pill);
  color: var(--fg);
  box-shadow: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
button:hover { border-color: var(--pill-line-hi); color: #fff; }

.toolbar { gap: 12px; margin: 0 0 24px; }

/* segmentet: det valda läget är en marmorvit pille */
.seg {
  gap: 2px;
  padding: 3px;
  background: var(--pill);
  border: 1px solid var(--pill-line);
  border-radius: 999px;
}
.seg button {
  border: 0;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 14px;
  color: var(--ink-soft);
  background: none;
}
.seg button:hover { color: #fff; background: rgba(243, 237, 227, 0.05); }
.seg button[aria-pressed="true"] {
  color: var(--bg);
  font-weight: 650;
  background: var(--bone);
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.7);
}

.chips { gap: 6px; }
.chips button {
  --c: var(--accent);
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  color: var(--ink-soft);
}
.chips button[data-comp="pl"], .ctag[title="Premier League"] { --c: var(--dv-pl); }
.chips button[data-comp="ch"], .ctag[title="Championship"] { --c: var(--dv-ch); }
.chips button[data-comp="l1"], .ctag[title="League One"] { --c: var(--dv-l1); }
.chips button[data-comp="l2"], .ctag[title="League Two"] { --c: var(--dv-l2); }
.chips button[data-comp="nl"], .ctag[title="National League"] { --c: var(--dv-nl); }
.chips button[data-comp="fac"], .ctag[title="FA Cup"] { --c: var(--dv-fac); }
.chips button[data-comp="lc"], .ctag[title="EFL Cup"] { --c: var(--dv-lc); }
.chips button[data-comp="all"] { --c: var(--gold); }
.chips button[aria-pressed="true"] {
  color: #fff;
  background: color-mix(in srgb, var(--c) 30%, rgba(14, 13, 11, 0.6));
  border-color: color-mix(in srgb, var(--c) 70%, transparent);
}

/* undermenyn på Divisioner som segmentet på förstasidan */
.dv-views { border-radius: 999px; }
.dv-views a { border-radius: 999px; }
.dv-views a[aria-current="page"] { color: var(--bg); background: var(--bone); box-shadow: none; }
.dv-sechead h3 { font-weight: 650; letter-spacing: -0.01em; }
.dv-tile-num { font-weight: 650; }

.dv-select {
  background-color: var(--pill);
  border-color: var(--pill-line);
  border-radius: 11px;
  color: var(--fg);
}
.dv-select:hover { border-color: var(--pill-line-hi); }
.dv-select option { background: var(--card); color: var(--fg); }

/* disclosure-pil i stället för webbläsarens triangel */
details > summary {
  list-style: none;
  cursor: pointer;
  color: var(--accent-deep);
  font-weight: 600;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 9px 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  vertical-align: 2px;
  transition: transform 0.2s ease;
}
details[open] > summary::before { transform: rotate(45deg); vertical-align: 3px; }
details > summary:hover { color: #fff; }

/* ---------- kort och tabeller ---------- */

.card,
.mlist,
.table-wrap {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.card { padding: 18px 20px; font-size: 14px; }
.card h4 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--eyebrow);
}
.card h4 .hint { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.card .src-line { font-size: 12px; color: var(--muted); }
#match-detail-view:not(.show-src) .src-line,
#match-detail-view:not(.show-src) .src-sub,
#match-detail-view:not(.show-src) .src-only,
#match-detail-view:not(.show-src) .card h4 .hint { display: none; }
.detail-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 28px 0 0; font-size: 13px; }
.detail-foot a { color: var(--muted); }
.detail-foot a:hover { color: var(--fg); }
.src-toggle { padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.src-toggle[aria-pressed="true"] { color: var(--bone); border-color: var(--pill-line-hi); }
#match-detail-view.show-src .src-hide { display: none; }

/* matchsidan: avsnitt som fälls ut när man trycker på rubriken */
details.fold {
  margin: 0 0 12px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
details.fold > summary { padding: 16px 20px; font-size: 15px; color: var(--fg); }
details.fold > summary:hover { color: #fff; }
details.fold > summary .hint { margin-left: 10px; font-size: 13px; font-weight: 500; color: var(--muted); }
details.fold[open] > summary { border-bottom: 1px solid var(--hair); }
.fold-body { padding: 16px 20px; font-size: 14px; }
.fold-body > :first-child { margin-top: 0; }
.fold-body .src-line { font-size: 12px; color: var(--muted); }
.fold-body .grid2 { margin-bottom: 0; }
.fold-body .card { background: transparent; box-shadow: none; }
.inj-line { margin: 0 0 2px; line-height: 1.5; }
.inj .src-hide { margin-bottom: 0.8rem; }
.model-plain { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.model-plain p { margin: 0 0 0.7rem; max-width: 68ch; }
.model-plain p:last-child { margin-bottom: 0; }

/* Utvärderingen: Fler tabeller hopfällt längst ner */
details.more {
  margin: 40px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
}
details.more + .dv-glossary { margin-top: 12px; }
details.more > h3:first-of-type { margin-top: 24px; }
/* tabeller som redan ligger i ett kort får ingen egen yta */
.card .table-wrap {
  background: transparent;
  border-color: var(--hair);
  border-radius: 10px;
  box-shadow: none;
}
.grid2 { gap: 16px; margin-bottom: 16px; }

table { font-size: 14px; }
th, td { border-bottom: 1px solid var(--hair); }
th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--eyebrow);
  border-bottom: 1px solid var(--border);
}
.table-wrap tbody tr { transition: background-color 0.12s ease; }
.table-wrap tbody tr:hover > td { background: rgba(243, 237, 227, 0.025); }
.sub { color: var(--muted); }

table.side tr.group td {
  background: rgba(243, 237, 227, 0.035);
  color: var(--eyebrow);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
table.cmp tr.model td { background: var(--accent-soft); color: #fff; }

.form span { border-radius: 7px; }

/* ---------- matchlistan ---------- */

.day { margin: 0 0 28px; }
/* dagen som en rad i en almanacka: kursiv serif, nyckeln i små versaler */
.day-head {
  display: flow-root; /* nyckeln till höger trycker aldrig in i listan under */
  margin: 0 0 10px 4px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bone);
}
.day-key {
  font-family: var(--sans);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 2.1;
  color: var(--eyebrow);
}
.mlist { overflow: hidden; }
.mrow {
  grid-template-columns: 3.2rem 3.3rem 1fr auto;
  gap: 14px;
  padding: 14px 20px;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  transition: background-color 0.15s ease;
}
.mrow:last-child { border-bottom: 0; }
.mrow:hover { background: rgba(243, 237, 227, 0.04); color: var(--fg); border-color: var(--hair); }
.mrow:focus-visible { outline-offset: -3px; }
.mtime { color: var(--ink-soft); font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ctag {
  --c: var(--accent);
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-radius: 999px;
  color: color-mix(in srgb, var(--c) 45%, #fff);
  background: color-mix(in srgb, var(--c) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent);
}
.mteams { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.mteams .vs { color: var(--muted); margin: 0 0.4rem; }
.mside { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mside b { color: var(--fg); font-weight: 750; }
.mside .score {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 650;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
  color: var(--bone);
}
.empty { color: var(--muted); }

/* Sannolikhetsstapeln 1 · X · 2 i hemma-, oavgjort- och bortafärg, det
   troligaste utfallet starkast. Under oddsen i matchlistan. */
.pbar { display: flex; gap: 3px; width: 100%; height: 4px; }
.pbar i { flex: var(--w) 1 0; min-width: 3px; border-radius: 999px; background: var(--o-home); opacity: 0.4; }
.pbar i:nth-child(2) { background: #8a8073; }
.pbar i:nth-child(3) { background: var(--o-away); }
.pbar i.max { opacity: 1; }
.mside-odds .pbar { min-width: 112px; margin-top: 7px; }

/* Prognosen under resultatet: det troligaste utfallet grönt om det slog in,
   rött om inte. */
.mside .tip-ok { color: var(--fresh); }
.mside .tip-no { color: var(--down); }

/* Nu-linjen i matchlistan: spelat ovanför, kommande under. Guldet som i
   resten av detaljerna. */
.now-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -4px 0 26px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.now-line::before,
.now-line::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--gold) 50%, transparent); }

/* Knappen ovanför de senaste resultaten: tar fram resten av de spelade. */
.earlier {
  margin: 0 0 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--pill);
  border: 1px solid var(--pill-line);
  box-shadow: none;
}
.earlier:hover { color: var(--fg); border-color: var(--pill-line-hi); }
.earlier .n { margin-left: 4px; font-weight: 500; color: var(--muted); }

/* ---------- matchvyn ---------- */

.back { margin: 22px 0 16px; }
.back a {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--pill);
  border: 1px solid var(--pill-line);
  border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.back a:hover { color: #fff; border-color: var(--pill-line-hi); }

.mhead {
  padding: clamp(20px, 3vw, 32px) clamp(18px, 3.4vw, 38px);
  margin-bottom: 16px;
  background: var(--glass-hi);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-hero);
}
/* tunn linje överst i hemma- och bortafärg */
.mhead::before {
  inset: 0 0 auto 0;
  width: auto;
  height: 3px;
  background: linear-gradient(90deg, var(--o-home), var(--o-away));
  opacity: 0.9;
}
.mhead-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eyebrow);
}
.mhead-teams { margin: 16px 0 4px; gap: 18px; }
.mhead-team {
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(28px, 4.4vw, 50px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.mhead-mid {
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(34px, 5vw, 58px);
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: var(--bone);
}
.mhead-mid .sub { font-family: var(--sans); font-size: 12px; font-weight: 500; }
.note { color: var(--stale); }

/* prognoskortet är matchvyns huvudnummer */
.card.fc {
  position: relative;
  overflow: hidden;
  padding: 22px clamp(18px, 3vw, 30px);
  margin-bottom: 16px;
  background: var(--glass-hi);
  border-color: var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-hero);
}
.fc-main { gap: 12px; margin: 6px 0 16px; }
.fc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eyebrow);
}
.fc-num {
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(44px, 6vw, 68px);
  font-variant-numeric: lining-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin-top: 4px;
  white-space: nowrap;
}
.fc-col.draw .fc-num { font-size: clamp(32px, 4.2vw, 48px); color: var(--muted); padding-top: 0.2em; }
.fc-range { font-size: 12px; margin-top: 2px; }
.fc-bar { height: 10px; gap: 3px; background: transparent; }
.fc-bar span { border-radius: 999px; }
.fc-stats, .fc-adv { font-size: 14px; color: var(--ink-soft); }
.fc-stats b, .fc-adv b { color: var(--fg); }
table.sgrid td { border-radius: 6px; }

/* ---------- källor och utvärdering ---------- */

.s-färsk { background: var(--fresh); box-shadow: 0 0 8px rgba(61, 179, 124, 0.55); }
.s-fel { background: var(--down); box-shadow: 0 0 8px rgba(240, 109, 94, 0.5); }
.badge, .phase-tag, .lower-tag { border-radius: 999px; }
.phase-tag { color: var(--accent-deep); background: var(--accent-soft); }
.chart-card { padding: 14px 16px 8px; }

/* ---------- sidfot ---------- */

footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding-top: 44px;
  padding-bottom: 48px;
  border-top: 0;
  font-size: 12.5px;
  color: var(--muted);
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 14px;
  background: var(--meander) repeat-x 0 50% / 14px 14px;
  opacity: 0.45;
}
footer p { margin: 0; }
footer .logo-sm { width: 20px; height: 20px; border-radius: 6px; flex: none; opacity: 0.9; }
/* när datan byggdes, och varningar – efter namnet, före länkarna */
footer .topline { font-size: inherit; text-align: left; color: var(--muted); }
footer .topline::before { content: "·"; margin-right: 10px; }
footer .topline a { color: inherit; }
footer .topline a:hover { color: var(--fg); }
footer .foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; }
footer .foot-links a { color: var(--muted); text-decoration: none; }
footer .foot-links a:hover,
footer .foot-links a[aria-current="page"] { color: var(--fg); }

/* ---------- mobil ---------- */

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .topbar-inner { min-height: 54px; gap: 10px; }
  .brand-txt b { font-size: 21px; }
  .brand .logo { width: 32px; height: 32px; border-radius: 10px; }
  .sp-ctl { margin-left: auto; }

  /* Menyn ligger i nederkant som i en app, med ikoner. Toppbaren får ingen
     backdrop-filter här – den skulle göra menyn fast i toppbaren i stället
     för i fönstret. */
  .topbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(14, 13, 11, 0.94);
  }
  .topbar .tabs {
    position: fixed;
    z-index: 50;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
    border-bottom: 0;
    background: rgba(18, 16, 13, 0.88);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 var(--border);
  }
  .tabs .tablist { flex: 3 1 0; gap: 0; }
  .tabs [role="tab"],
  .tabs a.tab-link {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 4px 0 2px;
    font-size: 10.5px;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .tabs [role="tab"]::before,
  .tabs a.tab-link::before {
    content: "";
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat;
    mask: var(--ico) center / contain no-repeat;
  }
  /* guldlinjen blir en liten bricka ovanför ikonen */
  .tabs [role="tab"]::after,
  .tabs a.tab-link::after { top: -6px; bottom: auto; left: 32%; right: 32%; border-radius: 0 0 2px 2px; }
  [data-tab="coupon-section"], .tab-link[href="index.html#kupong"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h18V10a2 2 0 0 0 0 4v3.5H3V14a2 2 0 0 0 0-4z'/%3E%3Cpath d='M15 7v10' stroke-dasharray='1.6 2'/%3E%3C/svg%3E"); }
  [data-tab="battle-section"], .tab-link[href="index.html#olympen"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 19.5 9.5 7l4 6.6 2.2-3.1 5.8 9z'/%3E%3Cpath d='M7.3 10.9l1.3 1 1-1.3 1.2 1.2 1-.8'/%3E%3Cpath d='M9.5 7V3.5l3 1-3 1'/%3E%3C/svg%3E"); }
  [data-tab="matches-section"], .tab-link[href="index.html#matcher"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8l3.8 2.8-1.45 4.45h-4.7L8.2 10.8z'/%3E%3Cpath d='M12 3v5M15.8 10.8l4.8-1.6M14.35 15.25l2.9 4M9.65 15.25l-2.9 4M8.2 10.8 3.4 9.2'/%3E%3C/svg%3E"); }
  .tab-link[href="tabeller.html"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M9 6.5h11M9 12h11M9 17.5h11'/%3E%3Cpath d='M4.5 6.5h.01M4.5 12h.01M4.5 17.5h.01' stroke-width='3'/%3E%3C/svg%3E"); }
  .tab-link[href="statistik.html"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5.5 19.5v-7M12 19.5v-14M18.5 19.5v-9'/%3E%3C/svg%3E"); }
  body { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }

  /* tre i bredd, porträttet ovanför namnet */
  .mrow { grid-template-columns: 2.9rem 1fr auto; gap: 10px; padding: 13px 14px; }
  .card { padding: 16px; }
  .mhead-teams { gap: 10px; }
  .fc-main { gap: 6px; }
  .fc-label { font-size: 10.5px; letter-spacing: 0.04em; }
  h3 { font-size: 22px; margin-top: 32px; }
}

/* smal mobil: oddsen på en egen rad under lagen, så att namnen får plats */
@media (max-width: 640px) {
  .mrow { row-gap: 5px; }
  .mside-odds { grid-column: 2 / -1; text-align: left; }
  .mside-odds .pbar { max-width: 150px; }
  /* prognosens procent på en rad även i smala kolumner */
  .fc-num { font-size: 38px; }
  .fc-col.draw .fc-num { font-size: 28px; }
  details.fold > summary { padding: 14px 16px; }
  .fold-body { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}