/* ─────────────────────────────────────────────────────────────────────────
   SLAKTARBANDY — klubbhuset: skog, papper, mässing.
   Gemensamma komponenter kompletteras av klubbhuslagret sist i filen.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --bg: #FAF7F2;
  --kort: #FFFFFF;
  --linje: #E5DFD5;
  --primaer: #1D4E7E;
  --primaer-mork: #15395E;
  --accent: #D98E1F;
  --accent-mork: #B3740F;
  --text: #1D2B36;
  --text-ljus: #5B6B77;
  --text-dov: #8A94A0;
  --ok: #2E7D46;
  --ok-bg: #E4F2E9;
  --avstar: #6B7684;
  --avstar-bg: #EDEEF0;
  --felande: #B3261E;
  --radie: 12px;
  --skugga: 0 1px 3px rgba(29, 43, 54, 0.08), 0 4px 14px rgba(29, 43, 54, 0.05);
  --bredd: 720px;
}

/* ─── Mörkt tema: djup furugrön bas, mocka-beige text, bandyblå accent ──── */
[data-tema="mork"] {
  color-scheme: dark;
  --bg: #141B17;
  --kort: #1E2721;
  --linje: #35423B;
  --primaer: #5B92CC;
  --primaer-mork: #8FBCE8;
  --accent: #E0A43C;
  --accent-mork: #EFB95C;
  --text: #EDE4D3;
  --text-ljus: #B9AF9E;
  --text-dov: #8A8578;
  --ok: #6FBF8A;
  --ok-bg: #1E3327;
  --avstar: #8A94A0;
  --avstar-bg: #2A342E;
  --felande: #E07B73;
  --skugga: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.25);
}
[data-tema="mork"] .sidhuvud { background: #16232E; }
[data-tema="mork"] .chip--accent { background: #33291A; color: var(--accent-mork); }
[data-tema="mork"] .chip--bla { background: #22303E; color: var(--primaer-mork); }
[data-tema="mork"] .passrad--installd .nr { background: #3A2320; }
[data-tema="mork"] .tabell tr.mastar-kandidat td { background: #26291C; }
[data-tema="mork"] .tabell-ledare td { background: #33291A; }
[data-tema="mork"] .tipskort { background: #33291A; border-color: #5A4A26; }
[data-tema="mork"] .tipskort .text, [data-tema="mork"] .tipskort .stang { color: var(--accent-mork); }
[data-tema="mork"] .forhands-rad td { background: #33291A; }
[data-tema="mork"] .form--ute { background: #22303E; }
[data-tema="mork"] .tabell tr.tabell-grupp--ute td { background: #332220; }
[data-tema="mork"] .form--m { background: #33291A; }
[data-tema="mork"] .inmatning, [data-tema="mork"] select.inmatning, [data-tema="mork"] textarea.inmatning { background: #16201B; }
[data-tema="mork"] .lagkol .spelarknapp { background: #16201B; color: var(--text); }
[data-tema="mork"] .spelarpool .spelarknapp { background: #22303E; color: var(--primaer-mork); }
[data-tema="mork"] .felruta { background: #3A2320; border-color: #5C3330; }
[data-tema="mork"] .okruta { border-color: #2E4A3A; }
[data-tema="mork"] .mastar-banner { background: #33291A; border-color: #5A4A26; color: var(--accent-mork); }
[data-tema="mork"] .login-titel { color: var(--primaer-mork); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.4em; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
p { margin: 0 0 0.8em; }
a { color: var(--primaer); }
.num { font-variant-numeric: tabular-nums; }

/* ─── Sidhuvud ─────────────────────────────────────────────────────────── */
.sidhuvud {
  background: var(--primaer);
  color: #fff;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: calc(10px + env(safe-area-inset-top));
}
.sidhuvud .sidhuvud-lank { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.sidhuvud img { height: 30px; width: auto; max-width: 150px; object-fit: contain; }
.sidhuvud .titel { font-weight: 800; letter-spacing: 1.2px; font-size: 17px; }
.sidhuvud .undertitel { font-size: 11px; opacity: 0.75; letter-spacing: 0.4px; }
.sidhuvud .fyll { flex: 1; }
.sidhuvud .vem { font-size: 12px; opacity: 0.9; text-align: right; min-width: 0; max-width: 30%; overflow-wrap: anywhere; }

/* Ekonomins formulär ska gå att sköta även i omklädningsrummet. */
[data-grupp] details { border-top: 1px solid var(--linje); margin-top: 16px; padding-top: 10px; }
[data-grupp] summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-weight: 700; }
[data-grupp] label.falt, #ekonomi-skapa label.falt { display: block; margin: 12px 0; }
[data-grupp] fieldset { min-width: 0; border: 1px solid var(--linje); border-radius: 10px; margin: 12px 0; padding: 12px; }
[data-grupp] .knapp { margin: 6px 4px 6px 0; }
#ekonomi-status:empty { display: none; }

/* ─── Offline-band ─────────────────────────────────────────────────────── */
.offline-band {
  display: none;
  background: var(--accent);
  color: #fff;
  text-align: center;
  font-size: 13px;
  padding: 6px 10px;
  font-weight: 600;
}
body.offline .offline-band { display: block; }

/* ─── Layout ───────────────────────────────────────────────────────────── */
.vy {
  max-width: var(--bredd);
  margin: 0 auto;
  padding: 16px 14px 24px;
}
.vy > * + * { margin-top: 14px; }

.kort {
  background: var(--kort);
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  padding: 16px;
  box-shadow: var(--skugga);
}
.kort--flat { box-shadow: none; }

.sektionsrubrik {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-ljus);
  margin: 20px 4px 8px;
}

/* ─── Knappar ──────────────────────────────────────────────────────────── */
.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  background: var(--primaer);
  color: #fff;
  transition: filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.knapp:active { filter: brightness(0.88); }
.knapp:disabled { opacity: 0.5; cursor: default; }
.knapp--accent { background: var(--accent); }
.knapp--ghost { background: transparent; color: var(--primaer); border-color: var(--primaer); }
.knapp--ljus { background: var(--avstar-bg); color: var(--text); }
.knapp--fara { background: transparent; color: var(--felande); border-color: var(--felande); }
.knapp--liten { min-height: 36px; padding: 6px 12px; font-size: 14px; border-radius: 8px; }
.knapp--block { display: flex; width: 100%; }

.svarsknappar { display: flex; gap: 10px; }
.svarsknappar .knapp { flex: 1; font-size: 17px; min-height: 56px; }
.knapp--kommer { background: var(--ok); }
.knapp--avstar { background: var(--avstar-bg); color: var(--text); border-color: var(--linje); }
.knapp--kanske { background: #B98A2F; }
.knapp--vald { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ─── Kallelse-kortet ──────────────────────────────────────────────────── */
.kallelse-meta { color: var(--text-ljus); font-size: 14px; margin-bottom: 4px; }
.kallelse-titel { font-size: 24px; font-weight: 800; }
.deadline-rad { font-size: 13px; color: var(--text-dov); margin-top: 10px; }
.mitt-svar-rad { font-size: 14px; color: var(--text-ljus); margin-top: 10px; }
.mitt-svar-rad b { color: var(--text); }

/* ─── Svarslistor ──────────────────────────────────────────────────────── */
.svarsgrupp { margin-top: 12px; }
.svarsgrupp-titel { font-size: 13px; font-weight: 700; color: var(--text-ljus); margin-bottom: 6px; }
.svarsgrupp-titel .antal { color: var(--text-dov); font-weight: 600; }
.namnrad {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--linje);
  font-size: 15px;
}
.namnrad:first-of-type { border-top: none; }
.namnrad .k { margin-left: auto; font-size: 12px; color: var(--text-dov); font-style: italic; }

/* ─── Chips/badges ─────────────────────────────────────────────────────── */
.chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--avstar-bg);
  color: var(--text-ljus);
}
.chip--ok { background: var(--ok-bg); color: var(--ok); }
.chip--accent { background: #FBEED3; color: var(--accent-mork); }
.chip--bla { background: #E3EDF7; color: var(--primaer); }

/* ─── Pass-lista ───────────────────────────────────────────────────────── */
.passrad {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--kort);
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--skugga);
}
.passrad:active { filter: brightness(0.96); }
.manadsrubrik {
  margin: 16px 4px 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dov);
}
.passrad + .manadsrubrik, .manadsrubrik:first-child { margin-top: 4px; }
.passrad .nr {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--primaer);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px;
  flex-shrink: 0;
}
.passrad--spelad .nr { background: var(--avstar-bg); color: var(--text-ljus); }
.passrad--installd .nr { background: #F3D9D7; color: var(--felande); }
.passrad .info { flex: 1; min-width: 0; }
.passrad .datum { font-weight: 700; font-size: 15px; }
.passrad .under { font-size: 13px; color: var(--text-ljus); }
.passrad .hoger { text-align: right; font-size: 13px; color: var(--text-ljus); flex-shrink: 0; }

/* ─── Tabell ───────────────────────────────────────────────────────────── */
.tabell-wrap { overflow-x: auto; }
table.tabell { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabell th {
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dov);
  padding: 6px 8px;
  border-bottom: 2px solid var(--linje);
  white-space: nowrap;
}
.tabell th:first-child, .tabell td:first-child { text-align: left; }
.tabell td { padding: 8px; border-bottom: 1px solid var(--linje); text-align: right; white-space: nowrap; }
.tabell tr.mastar-kandidat td { background: #FBF6E9; }
.tabell tr:last-child td { border-bottom: none; }
.tabell .placering { color: var(--text-dov); width: 26px; }
.tabell .namn { font-weight: 600; }
.tabell .krona { color: var(--accent); }
.tabell .utvisad { color: var(--text-dov); font-size: 11px; }
.justeringsmarkor { color: var(--accent-mork); font-size: 13px; cursor: help; }

/* Poängbalk + mästarspår i tabellen */
.tabell-ledare td { background: #FBF3DC; }
.poangbalk {
  height: 4px;
  border-radius: 999px;
  background: var(--avstar-bg);
  margin-top: 3px;
  min-width: 42px;
}
.poangbalk > div { height: 100%; border-radius: 999px; background: var(--primaer); }
.tabell-ledare .poangbalk > div { background: var(--accent); }
.minibar {
  display: inline-block;
  width: 60px;
  height: 5px;
  border-radius: 999px;
  background: var(--avstar-bg);
  vertical-align: middle;
  margin-left: 4px;
  overflow: hidden;
}
.minibar > span { display: block; height: 100%; background: var(--accent); }

/* Förhandsvisning i protokollföringen */
.tabell--mini { font-size: 13px; }
.tabell--mini td { padding: 5px 8px; }
.forhands-rad td { background: #FBEED3; }
.forhandsruta {
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  background: var(--kort);
  max-height: 320px;
  overflow-y: auto;
}

/* ─── Kommentarer ──────────────────────────────────────────────────────── */
.kommentar { padding: 10px 0; border-top: 1px solid var(--linje); }
.kommentar:first-of-type { border-top: none; }
.kommentar .huvud { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.kommentar .vem { font-weight: 700; font-size: 14px; }
.kommentar .nar { font-size: 12px; color: var(--text-dov); }
.kommentar .text { font-size: 15px; white-space: pre-wrap; }
.kommentar--dold { opacity: 0.55; }
.kommentar-bild {
  display: block; max-width: 180px; max-height: 180px; width: auto; height: auto;
  border-radius: 10px; margin-top: 8px; cursor: zoom-in;
  border: 1px solid var(--linje);
}
.bild-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(15, 20, 18, 0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; cursor: zoom-out;
}
.bild-overlay img { max-width: 100%; max-height: 100%; border-radius: 12px; }
.rorelse-upp { color: var(--ok); font-weight: 800; }
.rorelse-ner { color: var(--felande, #B3392E); font-weight: 800; }
.rorelse-ny { color: var(--primaer); font-weight: 700; font-size: 13px; }

/* ─── Säsongstips, nedräkning, svarsbalk (Hem) ─────────────────────────── */
.tipskort {
  background: #FBEED3;
  border: 1px solid #E8CF9E;
  border-radius: var(--radie);
  padding: 12px 14px;
  margin-bottom: 16px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.tipskort .text { font-size: 14px; color: #6B4E12; flex: 1; line-height: 1.45; }
.tipskort .stang {
  background: none; border: none; font-size: 15px; cursor: pointer;
  color: #6B4E12; padding: 2px 4px; line-height: 1; flex-shrink: 0;
}
.nedrakning {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-mork);
  font-variant-numeric: tabular-nums;
}
.svarsbalk {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--avstar-bg);
  margin-top: 12px;
}
.svarsbalk .b-kommer { background: var(--ok); transition: width .3s; }
.svarsbalk .b-kanske { background: #B98A2F; transition: width .3s; }
.svarsbalk .b-avstar { background: var(--avstar); transition: width .3s; }
.svarsbalk-text { font-size: 12px; color: var(--text-dov); margin-top: 5px; }

/* ─── Spelarprofil (aktuell säsong) ────────────────────────────────────── */.profilhuvud { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.profilbild { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--linje); flex-shrink: 0; }
.profilpoang { text-align: center; flex-shrink: 0; }
.profilpoang .num { font-size: 34px; font-weight: 800; color: var(--primaer); line-height: 1.1; }
.profilpoang .etikett { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dov); }
.formrad { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 12px; }
.formchip {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.form--v { background: var(--ok-bg); color: var(--ok); }
.form--m { background: #FBEED3; color: var(--accent-mork); }
.form--f { background: var(--avstar-bg); color: var(--avstar); }
.form--ute { background: #ECE7DC; color: var(--text-dov); }
a.formchip { text-decoration: none; }

/* ─── Tabellägen (uppdelad/poäng/snitt) ────────────────────────────────── */
.lageval { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.tabell-not { font-size: 12px; color: var(--text-dov); margin: 0 4px 6px; }
.tabell tr.tabell-grupp--ute td { background: #F7E8E4; }

/* ─── Formulär ─────────────────────────────────────────────────────────── */
.falt { margin-bottom: 14px; }
.falt label { display: block; font-size: 13px; font-weight: 700; color: var(--text-ljus); margin-bottom: 4px; }
.inmatning, select.inmatning, textarea.inmatning {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--linje);
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}
textarea.inmatning { min-height: 90px; resize: vertical; }
.inmatning:focus { outline: 2px solid var(--primaer); outline-offset: 1px; }
.falt .hjalp { font-size: 12px; color: var(--text-dov); margin-top: 4px; }

/* ─── Protokollföring (admin) ──────────────────────────────────────────── */
.lagvaljare { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .lagvaljare { grid-template-columns: 1fr 1fr 1fr; } }
.lagkol {
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  padding: 10px;
  background: var(--bg);
}
.lagkol--aktiv { outline: 2px solid var(--accent); outline-offset: 1px; }
.lagkol h3 { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-ljus); }
.lagkol .spelarknapp {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; margin-top: 6px;
  border-radius: 8px; border: 1px solid var(--linje);
  background: #fff; font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
.lagkol .spelarknapp:active { filter: brightness(0.94); }
.spelarpool { display: flex; flex-wrap: wrap; gap: 8px; }
.spelarpool .spelarknapp {
  padding: 9px 12px; border-radius: 999px; border: 1px solid var(--primaer);
  background: #E3EDF7; color: var(--primaer); font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit;
}
/* Vald/ibockad spelare (t.ex. närvarochecken i lottningen) */
.spelarpool .spelarknapp--vald { background: var(--primaer); color: #fff; }
[data-tema="mork"] .spelarpool .spelarknapp--vald { background: var(--primaer-mork); color: #10151C; border-color: var(--primaer-mork); }

/* ─── Tomt läge ────────────────────────────────────────────────────────── */
.tomt {
  text-align: center;
  color: var(--text-dov);
  padding: 28px 16px;
  font-size: 14px;
}
.tomt .stor { font-size: 16px; color: var(--text-ljus); font-weight: 600; margin-bottom: 4px; }

/* ─── Laddning/fel ─────────────────────────────────────────────────────── */
.laddar { text-align: center; color: var(--text-dov); padding: 40px 0; font-size: 14px; }
.felruta {
  background: #F9E5E4; color: var(--felande);
  border: 1px solid #EEC4C2; border-radius: 10px;
  padding: 12px 14px; font-size: 14px;
}
.okruta {
  background: var(--ok-bg); color: var(--ok);
  border: 1px solid #BFE0CC; border-radius: 10px;
  padding: 12px 14px; font-size: 14px; font-weight: 600;
}

/* ─── Bottennavigering ─────────────────────────────────────────────────── */
.bottennav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--kort);
  border-top: 1px solid var(--linje);
  display: flex;
  z-index: 30;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottennav a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  color: var(--text-dov);
  text-decoration: none;
}
.bottennav a.aktiv { color: var(--primaer); }
.bottennav .ikon { font-size: 27px; line-height: 1; }

/* ─── Login ────────────────────────────────────────────────────────────── */
.login-wrap { max-width: 400px; margin: 8vh auto 0; padding: 0 16px; }
.login-sköld { display: block; width: 110px; margin: 0 auto 12px; }
.login-titel { text-align: center; font-size: 24px; font-weight: 800; letter-spacing: 1px; color: var(--primaer); }
.login-under { text-align: center; color: var(--text-ljus); font-size: 14px; margin-bottom: 20px; }

/* ─── Landningssida (#/start) ──────────────────────────────────────────── */
.start-wrap { max-width: 480px; margin: 0 auto; padding: 18px 16px 0; }
.start-sköld { display: block; width: min(62vw, 250px); margin: 6px auto 14px; filter: drop-shadow(0 6px 18px rgba(29, 43, 54, 0.18)); }
.start-nedräkning { font-size: 21px; font-weight: 800; color: var(--primaer); margin: 8px 0 6px; }

/* ─── Admin-menyn ──────────────────────────────────────────────────────── */
.adminmeny { display: grid; gap: 10px; }
.adminmeny .knapp { justify-content: flex-start; }

/* ─── Utskriftsvänlig radinfo ──────────────────────────────────────────── */
.metatabell { font-size: 13px; color: var(--text-ljus); }
.metatabell td { padding: 3px 8px 3px 0; }
.metatabell td:first-child { font-weight: 700; }

/* ─── Modal ────────────────────────────────────────────────────────────── */
.modal-bak {
  position: fixed; inset: 0;
  background: rgba(29, 43, 54, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 50;
}
@media (min-width: 560px) { .modal-bak { align-items: center; } }
.modal {
  background: var(--kort);
  border-radius: 16px 16px 0 0;
  width: 100%; max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
}
@media (min-width: 560px) { .modal { border-radius: 16px; } }
.modal h2 { margin-bottom: 12px; }

/* ─── UI-ikoner (SVG med emoji-fallback) ───────────────────────────────── */
.uiikon { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; vertical-align: -0.22em; }
.uiikon img { width: 100%; height: 100%; object-fit: contain; }
.uiikon .emoji-fb { font-size: 1em; line-height: 1; }

/* ─── Mästarkröning ────────────────────────────────────────────────────── */
.mastar-banner {
  display: flex; align-items: center; gap: 12px;
  background: #FBF3DC;
  border: 1px solid #E8CF9E;
  border-radius: var(--radie);
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 15px;
  color: #6B4E12;
}
.mastar-banner .uiikon { width: 2em; height: 2em; flex-shrink: 0; }
.mastar-banner .emoji-fb { font-size: 1.6em; }
.mastar-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(29, 43, 54, 0.72);
  padding: 20px;
}
.mastar-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mastar-kort {
  position: relative;
  background: var(--kort);
  border-radius: 18px;
  max-width: 420px; width: 100%;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}
.mastar-pokal .uiikon { width: 72px; height: 72px; }
.mastar-pokal img { display: block; width: 150px; height: auto; margin: 0 auto 4px; filter: drop-shadow(0 8px 14px #0006); }
.mastar-pokal .emoji-fb { font-size: 60px; }
.mastar-rubrik { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--accent-mork); margin-top: 10px; }
.mastar-text { font-size: 19px; font-weight: 700; margin: 10px 0 8px; line-height: 1.4; }
.mastar-under { font-size: 13px; color: var(--text-dov); margin-bottom: 18px; }

/* ─── Säsongsteman (dekorationslager — aldrig i vägen) ─────────────────── */
.tema-lager { pointer-events: none; }
.tema-regn { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 18; }

.dold { display: none !important; }
.swish-qr {display:block;width:min(100%,260px);height:auto;background:white;padding:12px;margin:12px auto;border-radius:8px;box-sizing:border-box;}
.kalender-rutnat { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:14px 0; }
.kalender-veckodag { text-align:center;font-size:11px;color:var(--text-dov); }
.kalender-dag { min-height:64px;padding:4px 2px;border:1px solid var(--kant,#ddd);border-radius:5px;text-align:center;font-size:13px; }
.kalender-idag { outline:2px solid var(--accent,#1d4e7e);outline-offset:-2px; }
.kalender-pass { display:block;overflow-wrap:anywhere;margin-top:6px;font-size:11px;font-weight:700;min-height:30px; }

/* Klubbhuset — gemensam visuell grund, september 2026. */
:root {
  --bg: #f3f0e8; --kort: #fffdf8; --linje: #ded9cc;
  --primaer: #264b3d; --primaer-mork: #183b2f; --accent: #9b6729; --accent-mork: #81501e;
  --text: #28382f; --text-ljus: #657066; --text-dov: #737b70;
  --radie: 16px; --skugga: 0 3px 16px #293d2c08;
}
[data-tema="mork"] {
  --bg: #141e19; --kort: #1d2a22; --linje: #39483d;
  --primaer: #a9cbb6; --primaer-mork: #cce2d3; --accent: #dbb378; --accent-mork: #e8c99c;
  --text: #f3eddf; --text-ljus: #c0c8bc; --text-dov: #a8b2a3;
}
body { background-image: radial-gradient(ellipse at top, #b9a27616, transparent 75%); background-repeat: no-repeat; background-size: 100% 100vh; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
a, button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sidhuvud, [data-tema="mork"] .sidhuvud { background: #203c35; border-bottom: 1px solid #d6b27455; padding: 9px max(16px, calc((100vw - 760px)/2)); }
.sidhuvud img { width: 32px; height: 38px; }
.sidhuvud .titel { font-size: 17px; font-weight: 800; letter-spacing: .025em; }
.sidhuvud .vem { font-size: 12px; max-width: 38%; overflow-wrap: anywhere; }
.vy { width: 100%; max-width: 760px; padding: 20px 18px; margin: auto; }
.kort { padding: 20px; border: 1px solid var(--linje); }
.knapp { border-radius: 10px; min-height: 44px; font-weight: 650; text-decoration: none; }
.knapp--ljus { color: var(--primaer); background: var(--bg); border: 1px solid var(--linje); }
.knapp--ghost { color: var(--primaer); }
.knapp--liten { min-height: 40px; }
.bottennav { padding: 5px max(8px, calc((100vw - 760px)/2)) env(safe-area-inset-bottom); box-shadow: 0 -3px 22px #1a38290a; }
.bottennav a { flex-direction: column; gap: 4px; margin: 2px 4px; padding: 7px 4px; border-radius: 12px; }
.bottennav a.aktiv { background: var(--bg); box-shadow: inset 0 -2px var(--accent); }
.bottennav .ikon { font-size: 23px; }
.nav-label { font-size: 11px; font-weight: 650; }
.start-wrap { max-width: none; padding: 0; }
.club-hero { position: relative; display: flex; align-items: center; gap: 22px; padding: 26px 30px; margin-bottom: 18px; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 85% 20%, #4c6250 0%, transparent 60%), #203c35; color: #f4ebd9; border: 1px solid #46604c; }
.club-copy { flex: 1; z-index: 1; }
.eyebrow { font-size: 10px; font-weight: 750; letter-spacing: .2em; color: #dbc08b; }
.club-copy h1 { font-family: Georgia, serif; font-size: clamp(25px, 4vw, 38px); font-weight: 500; max-width: 250px; margin: 9px 0; line-height: 1.12; }
.club-copy p { font-size: 12px; color: #d1d8c9; margin: 0; }
.start-sköld { width: 150px; height: 156px; object-fit: contain; flex-shrink: 0; margin: 0; filter: drop-shadow(0 9px 10px #0006); transform: rotate(3deg); }
.start-wrap .kort { border-top: 3px solid var(--accent); }
.start-nedräkning { font-family: Georgia, serif; font-weight: 500; font-size: 27px; }
.start-action { margin: 16px 0 0; }
.start-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.start-shortcuts a, .discussion-link { display: flex; gap: 12px; align-items: center; padding: 16px; border: 1px solid var(--linje); background: var(--kort); border-radius: 13px; text-decoration: none; color: var(--text); }
.start-shortcuts a:hover, .discussion-link:hover { border-color: var(--accent); background: var(--bg); }
.start-shortcuts .uiikon, .discussion-link .uiikon { width: 25px; height: 25px; flex-shrink: 0; }
.start-shortcuts span:not(.uiikon), .discussion-link > span:not(.uiikon) { flex: 1; font-weight: 650; font-size: 14px; }
.start-shortcuts small, .discussion-link small { display: block; font-size: 11px; color: var(--text-ljus); font-weight: 400; margin-top: 3px; }
.start-shortcuts b, .discussion-link b { font-weight: 400; color: var(--accent); }
.club-footer { text-align: center; font-size: 11px; color: var(--text-ljus); margin: 18px 0 0; }
.response-confirmed { padding: 14px 16px; border-radius: 10px; background: var(--ok-bg); color: var(--text); margin-top: 16px; border-left: 3px solid var(--ok); }
.response-pending { background: var(--bg); border-color: var(--accent); animation: waiting 3s ease-in-out infinite; }
.response-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
@keyframes waiting { 50% { box-shadow: 0 0 0 3px #bb94422b; } }
.discussion-link { margin: 12px 0 18px; }
.inmatning { max-width: 100%; min-width: 0; }
.namnrad { gap: 8px; overflow-wrap: anywhere; }
.svarsknappar { gap: 7px; }
.svarsknappar .knapp { font-size: 14px; min-width: 0; }
.tipskort { background: var(--bg); border-color: var(--linje); }
.tipskort .text { color: var(--text-ljus); }
@media(max-width: 480px) {
  .vy { padding: 14px 14px; }
  .kort { padding: 16px; margin-bottom: 14px; }
  .club-hero { padding: 20px 18px; gap: 8px; margin-bottom: 14px; }
  .club-copy h1 { font-size: 27px; max-width: 190px; }
  .start-sköld { width: 108px; height: 122px; }
  .eyebrow { font-size: 8px; letter-spacing: .13em; }
  .start-nedräkning { font-size: 24px; }
  .start-shortcuts a { padding: 13px 10px; gap: 8px; }
  .start-shortcuts a > b { display: none; }
  .start-shortcuts small { font-size: 10px; }
  .club-footer { margin: 14px 0 0; }
}
@media(prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
[data-tema="mork"] .knapp:not(.knapp--ljus):not(.knapp--ghost):not(.knapp--fara):not(.knapp--avstar) { color: #12281e; }
[data-tema="mork"] .uiikon img { filter: brightness(1.65) saturate(.65); }
.attendance-details summary { cursor: pointer; font-size: 15px; }
.attendance-details summary span { display: block; color: var(--text-ljus); font-size: 12px; margin-top: 4px; }
.attendance-details[open] summary { margin-bottom: 15px; }

/* Återkoppling: skölden står för sig själv, kallelsen är appens ingång. */
.shield-hero { display: flex; justify-content: center; padding: 4px 0 16px; }
.shield-hero .start-sköld { width: 168px; height: 174px; transform: none; }
.next-training-date { font: 500 29px/1.18 Georgia,serif; color: var(--primaer); margin: 10px 0; }
.next-training-date strong { display: block; font: 750 34px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.sidhuvud .vem { font-size: 15px; font-weight: 650; }
.sidhuvud img { width: 40px; height: 40px; }
.pass-over-twenty { color: var(--ok); font-weight: 800; }
.pass-check { font-size: 11px; }
.training-calendar { margin-bottom: 20px; }
.calendar-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.calendar-heading h2 { margin:0; text-transform:capitalize; font-size:20px; }
.week-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr); gap:7px; }
.week-headings { padding:0 12px; margin-bottom:8px; font-size:13px; font-weight:700; }
.week-headings small { display:block; color:var(--text-ljus); font-weight:400; font-size:10px; }
.week-headings > :last-child { color:var(--primaer); }
.calendar-week { padding:9px 12px 12px; border:1px solid var(--linje); border-radius:13px; background:var(--kort); margin-bottom:8px; }
.week-label { font-size:9px; font-weight:750; letter-spacing:.12em; color:var(--text-ljus); margin-bottom:6px; }
.week-day { min-width:0; display:flex; flex-direction:column; gap:5px; padding:6px 4px; }
.week-date { font-size:12px; font-weight:650; }
.week-step { font-size:11px; color:var(--text-ljus); }
.week-step--muted { opacity:.8; }
.week-thursday { border-left:2px solid var(--accent); padding-left:9px; }
.week-today { outline:2px solid var(--accent); outline-offset:2px; border-radius:5px; }
.week-training { text-decoration:none; color:var(--primaer); border-radius:7px; padding:6px; background:var(--bg); display:block; }
.week-training strong { display:block; font-size:18px; }
.week-training small { font-size:10px; }
.week-training--installd { color:var(--felande); }
.week-training--uppehall { color:var(--text-ljus); }
.week-training--spelad strong { font-size:13px; }
.week-extra { display:flex; align-items:center; gap:12px; margin-top:7px; font-size:12px; border-top:1px solid var(--linje); padding-top:7px; }
@media(max-width:380px) { .sidhuvud .titel { font-size:14px; } .sidhuvud .vem { font-size:14px; } .next-training-date {font-size:25px;} }
.stats-columns { display:none; }
@media(max-width:600px) {
  .stats-columns { display:inline-flex; margin-bottom:8px; }
  .stats-card:not(.stats-expanded) .tabell :is(th,td):is(:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(9),:nth-child(10),:nth-child(11),:nth-child(12),:nth-child(13)) { display:none; }
  .stats-card:not(.stats-expanded) .tabell { table-layout:fixed; }
  /* Samma teckenstorlek i båda lägena — fler kolumner ska bara ge fler kolumner. */
  .stats-card .tabell :is(th,td) { font-size:13px; }
  .stats-card .tabell th { font-size:10px; letter-spacing:0; }
  .stats-card:not(.stats-expanded) .tabell :is(th,td) { padding:8px 3px; white-space:normal; overflow-wrap:anywhere; }
  .stats-card.stats-expanded .tabell :is(th,td) { padding:8px 6px; white-space:nowrap; }
  .stats-card:not(.stats-expanded) .tabell :is(th,td):first-child { width:20px; }
  .stats-card:not(.stats-expanded) .tabell :is(th,td):nth-child(2) { width:28%; text-align:left; }
}
.calendar-week { padding:7px 10px 9px; }
.week-label { margin-bottom:3px; line-height:1.2; }
.week-day { padding-top:4px; padding-bottom:4px; }

/* Startsidan samlar det personliga läget inför kommande pass. */
.shield-hero .start-sköld { width:198px; height:205px; }
.shield-hero { padding-bottom:10px; }
.start-match-card .next-training-date { margin:7px 0; font-size:26px; }
.start-match-card .next-training-date strong { font-size:31px; }
.start-match-card .kallelse-meta { font-size:11px; }
.start-my-response { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; margin:8px 0 0; font-size:13px; }
.start-my-response a { padding:6px 0 6px 8px; font-size:12px; text-underline-offset:3px; }
.start-attendance, .start-personal { border-top:1px solid var(--linje); margin-top:11px; padding-top:11px; }
.start-attendance h2, .start-personal h2 { font-size:14px; margin:0 0 5px; }
.start-attendance p { font-size:13px; margin:0; line-height:1.55; overflow-wrap:anywhere; }
.start-attendance .start-maybe { color:var(--text-ljus); font-size:12px; margin-top:3px; }
.start-attendance details { font-size:11px; color:var(--text-ljus); margin-top:4px; }
.start-attendance summary { cursor:pointer; }
.personal-numbers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:8px 0; }
.personal-numbers dt { font-size:11px; color:var(--text-ljus); }
.personal-numbers dd { font-size:23px; font-weight:750; margin:1px 0 0; font-variant-numeric:tabular-nums; line-height:1.3; }
.personal-numbers small { display:block; font-size:10px; color:var(--text-ljus); }
.personal-form { margin:4px 0 0; font-size:12px; }
.start-pass-hint { font-size:10px; color:var(--text-ljus); text-align:center; margin:5px 0 0; }
.start-match-card .start-action { margin:12px 0 0; }
@media(max-height:760px) and (max-width:600px) { .shield-hero .start-sköld { width:155px; height:160px; } }
@media(min-width:601px) { .shield-hero .start-sköld { width:220px; height:228px; } }
@media(max-width:600px) and (min-height:761px) {
  .vy:has(.start-wrap) { padding-top:10px; padding-bottom:0; }
  .start-wrap .shield-hero { padding:0 0 4px; }
  .shield-hero .start-sköld { width:180px; height:186px; }
  .start-wrap .start-match-card { margin-bottom:0; }
  .start-attendance, .start-personal { margin-top:8px; padding-top:8px; }
  .start-my-response { margin-top:4px; }
}

/* Passidan: gemensam information, svar, deltagare och samtal. */
.pass-backlinks { display:flex; align-items:center; justify-content:space-between; margin:0 0 12px; font-size:13px; }
.pass-backlinks a { text-decoration:none; padding:6px 0; }
.pass-header { border-top:3px solid var(--accent); }
.pass-header .kallelse-titel { margin:5px 0; font:500 30px/1.2 Georgia,serif; }
.pass-venue { font-size:16px; font-weight:650; margin:5px 0; }
.pass-notice { background:var(--bg); border-left:3px solid var(--accent); padding:12px 14px; margin-top:12px; border-radius:0 9px 9px 0; }
.pass-notice h2 { font-size:13px; margin:0 0 5px; }
.pass-notice p { font-size:14px; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.pass-info-editor, .pass-admin-tools, .pass-teams { border-top:1px solid var(--linje); margin-top:12px; padding-top:10px; }
.pass-info-editor summary, .pass-admin-tools summary, .pass-teams summary { cursor:pointer; font-size:12px; color:var(--primaer); min-height:28px; }
.pass-info-editor label { display:block; font-size:12px; margin:8px 0 5px; }
.pass-info-editor button { margin-top:8px; }
.pass-team-status { font-size:12px; color:var(--text-ljus); margin:8px 0 0; }
.pass-section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pass-section-heading h2 { margin:0; font-size:16px; }
.pass-reply .mitt-svar-rad { margin:5px 0; padding:5px 0; font-size:13px; }
.pass-deadline { margin-top:6px; }
.pass-deadline summary { font-size:11px; color:var(--text-ljus); cursor:pointer; }
.pass-reply #pass-calendar { margin-top:7px; }
#pass-response-editor { margin-top:12px; }
.pass-player-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 8px; margin-top:12px; }
.pass-player { display:flex; align-items:center; gap:8px; min-width:0; }
.player-avatar { width:32px; height:32px; flex-shrink:0; border-radius:50%; object-fit:cover; border:1px solid var(--linje); }
.player-initials { display:inline-flex; align-items:center; justify-content:center; background:var(--bg); color:var(--primaer); font-size:10px; font-weight:750; }
.pass-player b { display:block; font-size:13px; overflow-wrap:anywhere; }
.pass-player small { display:block; font-size:11px; color:var(--text-ljus); overflow-wrap:anywhere; }
.pass-response-group { border-top:1px solid var(--linje); padding-top:10px; margin-top:12px; }
.pass-response-group summary { cursor:pointer; font-size:12px; color:var(--text-ljus); }
.pass-response-group h3 { font-size:12px; margin:10px 0 0; }
.pass-comment .huvud { align-items:center; gap:7px; flex-wrap:wrap; }
.pass-comment .text { margin-left:39px; overflow-wrap:anywhere; }
.pass-comment .kommentar-bild { margin-left:39px; max-width:calc(100% - 39px); max-height:180px; object-fit:cover; border-radius:10px; }
.comment-actions { margin-left:auto; position:relative; }
.comment-actions summary { width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; list-style:none; border-radius:7px; font-size:22px; color:var(--text-ljus); }
.comment-actions summary::-webkit-details-marker { display:none; }
.comment-actions[open] > div { display:flex; gap:6px; position:absolute; right:0; top:36px; z-index:5; padding:8px; background:var(--kort); box-shadow:var(--skugga); border:1px solid var(--linje); border-radius:10px; }
.pass-movement summary { cursor:pointer; font-size:15px; font-weight:650; }
#comment-status { font-size:12px; }
#ny-kommentar { min-height:70px; }

/* Admin walkthrough: isolated, explicitly labelled interaction preview. */
.admin-demo { max-width: 680px; margin: 0 auto; }
.demo-banner { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--linje); border-radius: 12px; background: var(--kort); font-size: 11px; letter-spacing: .07em; font-weight: 800; }
.demo-banner span { font-weight: 400; letter-spacing: 0; font-size: 13px; }
.demo-steg { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; margin: 20px 0; }
.demo-steg button { border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--text-dov); padding: 8px 1px; font: inherit; font-size: 11px; cursor: pointer; }
.demo-steg b { display: block; font-size: 18px; margin-bottom: 5px; }
.demo-steg button[aria-current] { color: var(--text); border-color: #b79756; font-weight: 800; }
.demo-eyebrow { font-size: 11px; letter-spacing: .1em; color: var(--text-dov); font-weight: 800; margin: 0 0 10px; }
.demo-scen h2 { font-size: 26px; margin: 0 0 14px; }
.demo-scen p { line-height: 1.55; }
.demo-counts { display: grid; grid-template-columns: repeat(3,1fr); text-align: center; padding: 16px 0; margin-bottom: 16px; }
.demo-counts b { display: block; font-size: 32px; }
.demo-counts div { font-size: 13px; }
.demo-paging { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0; }
.demo-paging span { font-size: 12px; color: var(--text-dov); }
.demo-roster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-roster label { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--linje); border-radius: 10px; }
.demo-roster input { width: 20px; height: 20px; accent-color: #275b45; }
.demo-principer { padding: 14px; border-left: 3px solid #b79756; background: rgba(183,151,86,.08); margin-bottom: 18px; }
.demo-principer h3 { margin-top: 0; }
.demo-principer ul { padding-left: 18px; line-height: 1.5; font-size: 14px; }
.demo-principer li + li { margin-top: 8px; }
.demo-principer summary { cursor: pointer; font-size: 13px; font-weight: 700; }
.demo-lag { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.demo-lag > div { padding: 14px; border: 1px solid var(--linje); border-radius: 12px; }
.demo-lag h3 { margin-top: 0; }
.demo-lag p { font-size: 14px; }
.demo-score { font-size: 30px; text-align: center; margin-top: 8px; }
.demo-scen .knapp--block + .knapp--block, .demo-dialog .knapp + .knapp { margin-top: 10px; }
.demo-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 24px; border: 1px solid #b79756; border-radius: 20px; background: var(--bg); color: var(--text); box-shadow: 0 20px 70px #0005; }
.demo-dialog::backdrop { background: #10261dcc; }
.demo-dialog h2 { font-size: 26px; margin: 10px 0; }
.demo-dialog p { line-height: 1.5; }
.demo-message, .demo-published { background: rgba(183,151,86,.1); border-radius: 12px; padding: 16px; margin: 16px 0; }
.demo-days { display:flex; gap:6px; margin:16px 0; }
.demo-days .knapp { flex:1; padding:10px 6px; font-size:13px; }
.demo-response-list { display:grid; gap:8px; margin:12px 0 20px; }
.demo-response-list label { display:grid; grid-template-columns:75px 1fr; align-items:center; gap:8px; }
.demo-response-list select { min-width:0; }
.demo-scen > details { border-top:1px solid var(--linje); padding:14px 0; }
.demo-scen > details > summary { cursor:pointer; }
.demo-recipient-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0; }
.demo-recipient-list label { display:flex; gap:8px; align-items:center; font-size:14px; padding:5px 0; }
.demo-recipient-list input { width:20px; height:20px; accent-color:#275b45; flex-shrink:0; }
.demo-recipient-list small { display:block; color:var(--text-dov); font-size:11px; }
.demo-roster label { overflow-wrap:anywhere; }

/* Min profil */
.profile-identity { display:flex; align-items:center; gap:18px; }
.profile-identity > div { min-width:0; }
.profile-identity h1 { margin:3px 0 8px; font-size:30px; overflow-wrap:anywhere; }
.profile-identity .profilbild, .profile-initial { width:88px; height:88px; flex-shrink:0; }
.profile-initial { display:grid; place-items:center; background:var(--bg); color:var(--primaer); border:1px solid var(--linje); border-radius:50%; font:700 28px Georgia,serif; }
.profile-eyebrow { color:var(--text-ljus); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; }
.profile-hero { border-top:3px solid var(--accent); }
.profile-invitation { border-left:3px solid var(--primaer); }
.profile-invitation h2 { margin:6px 0; font-size:20px; }
.profile-invitation p { margin:8px 0 0; font-size:14px; }
.profile-panel > summary { cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; list-style:none; font-weight:700; min-height:44px; }
.profile-panel > summary::-webkit-details-marker { display:none; }
.profile-panel > summary::after { content:'+'; font-size:24px; color:var(--primaer); }
.profile-panel[open] > summary::after { content:'−'; }
.profile-panel small { display:block; font-size:12px; line-height:1.5; color:var(--text-ljus); font-weight:400; }
.profile-panel-body { border-top:1px solid var(--linje); margin-top:14px; padding-top:16px; }
.profile-invitation-choice { display:flex; align-items:center; gap:12px; min-height:48px; font-size:15px; margin-top:10px; cursor:pointer; }
.profile-invitation-choice input { width:20px; height:20px; flex-shrink:0; accent-color:var(--primaer); }

/* Ekonomi: compact shared mobile preview, theme colours inherited. */
.ekonomi-demo { max-width: 680px; margin: 0 auto; }
.ekonomi-demo > h1 { margin-top: 14px; }
.eko-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .09em; color: var(--text-ljus); margin-bottom: 10px; }
.eko-tabs { display: flex; gap: 8px; margin: 18px 0; }
.eko-tabs > button { flex: 1; min-width: 0; }
.eko-fee { border-top: 4px solid var(--accent); }
.eko-fee:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.eko-amount { font-size: clamp(32px, 9vw, 48px); font-weight: 800; line-height: 1.1; margin: 16px 0; font-variant-numeric: tabular-nums; }
.eko-badge { display: inline-block; background: var(--ok-bg); color: var(--text); border-radius: 20px; padding: 5px 10px; font-size: 12px; font-weight: 700; margin-bottom: 14px; }
.eko-formula { background: var(--bg); border: 1px solid var(--linje); border-radius: 10px; padding: 12px; margin: 12px 0; overflow-wrap: anywhere; }
.eko-formula p { margin: 5px 0 0; }
.eko-breakdown { margin: 14px 0; }
.eko-breakdown > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linje); }
.eko-breakdown dt { color: var(--text-ljus); }
.eko-breakdown dd { margin: 0; font-weight: 700; text-align: right; }
.eko-row { border-bottom: 1px solid var(--linje); padding: 12px 0; }
.eko-row-head { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.eko-row-head span { grid-column: 1; font-size: 12px; color: var(--text-ljus); }
.eko-row-head strong { grid-column: 2; grid-row: 1 / 3; align-self: center; font-variant-numeric: tabular-nums; }
.eko-row summary { font-size: 13px; min-height: 36px; padding-top: 8px; }
.eko-row details[open] summary { margin-bottom: 8px; }
.eko-summary { background: var(--bg); padding: 12px; border-radius: 10px; font-weight: 700; margin: 14px 0; }
.eko-notice { border: 2px solid var(--accent); border-radius: var(--radie); background: var(--kort); padding: 18px; margin-bottom: 16px; }
.ekonomi-demo .knapp { white-space: normal; }
.ekonomi-demo .falt { min-width: 0; }
.ekonomi-demo .inmatning { max-width: 100%; }
.ekonomi-demo > .knapp--block { margin-bottom: 14px; }

/* Omklädningsrummet: samma klubbhus, samtal och omröstningar. */
.rum { max-width: 680px; margin: 0 auto; overflow-wrap: anywhere; }
.rum .demo-banner { margin: 16px 0; }
.rum-intro { margin: 20px 0; }
.rum h1 { font-size: clamp(22px, 6vw, 28px); margin: 14px 0; }
.rum-list { display: grid; gap: 12px; margin: 18px 0; }
.rum-thread { display: grid; gap: 10px; width: 100%; margin: 0; text-align: left; color: var(--text); font: inherit; cursor: pointer; border: 1px solid var(--linje); }
.rum-thread:first-child { border-top: 3px solid var(--accent); }
.rum-thread strong { font-size: 19px; line-height: 1.3; }
.rum-meta { color: var(--text-ljus); font-size: 12px; }
.rum-unread { color: var(--primaer); font-weight: 800; }
.rum-excerpt { color: var(--text-ljus); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rum-back { background: transparent; border: 0; color: var(--primaer); padding: 10px 0; font: inherit; cursor: pointer; }
.rum-author { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0; font-size: 14px; }
.rum-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--text); background: var(--ok-bg); font-weight: 800; }
.rum-text { white-space: pre-wrap; }
.rum-reactions { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.rum-reactions summary { font-size: 13px; padding: 10px 0; }
.rum .knapp[aria-pressed="true"] { border-color: var(--primaer); background: var(--ok-bg); color: var(--text); }
.rum-poll { background: var(--kort); border: 1px solid var(--linje); border-top: 3px solid var(--accent); border-radius: var(--radie); padding: 18px; margin: 18px 0; }
.rum-option { border-bottom: 1px solid var(--linje); padding: 14px 0; }
.rum-option label { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; cursor: pointer; min-height: 40px; }
.rum-option input, .rum-check input { width: 20px; height: 20px; accent-color: var(--primaer); margin: 0; }
.rum-option summary { font-size: 12px; padding: 8px 0; }
.rum-meter { background: var(--bg); height: 5px; border-radius: 5px; margin: 7px 0; overflow: hidden; }
.rum-meter span { display: block; height: 100%; background: var(--accent); }
.rum-manage { margin: 18px 0; }
.rum-manage summary { padding: 6px 0; }
.rum-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.rum-reply { border-top: 1px solid var(--linje); margin-top: 18px; padding-top: 8px; }
.rum-check { display: flex; align-items: center; gap: 10px; margin: 15px 0; }
.rum .knapp { white-space: normal; }
.rum #rum-status:not([hidden]) { background: var(--ok-bg); padding: 12px; border-radius: 10px; }

/* Besked: gemensam inkorg för frontenddemon. */
.besked { max-width: 680px; margin: 0 auto; }
.besked .demo-banner { margin: 18px 0; }
.besked-filters { display: flex; gap: 8px; margin: 16px 0 8px; }
.besked-filters button { flex: 1; }
.besked-list { display: grid; gap: 12px; margin: 16px 0; }
.besked-item { margin: 0; border-left: 4px solid var(--linje); }
.besked-item.besked-unread { border-left-color: var(--accent); }
.besked-item a { display: block; color: var(--text); text-decoration: none; }
.besked-item h2 { font-size: 18px; margin: 8px 0; }
.besked-item p { font-size: 14px; color: var(--text-ljus); }
.besked-open { font-weight: 700; color: var(--primaer); }
.besked-item > button { margin-top: 8px; }
.besked-empty { padding: 24px; }
.besked-bell { position: relative; display: grid; justify-items: center; color: inherit; flex-shrink: 0; min-width: 44px; padding: 5px; text-decoration: none; margin-left: 8px; }
.besked-bell[hidden] { display: none; }
.besked-bell small { font-size: 9px; line-height: 1.1; }
#besked-count { position:absolute; right:2px; top:2px; background:var(--accent); border-radius:50%; width:8px; height:8px; padding:0; }
.sidhuvud .vem { min-width: 0; overflow-wrap: anywhere; }
@media(max-width: 420px) { .sidhuvud .vem { font-size: 12px; } .sidhuvud-lank { min-width: 0; flex-shrink: 0; } .sidhuvud .fyll { min-width: 0; } }
/* Startsidan håller ihop träningen och föreningens nya delar. */
.start-wrap .shield-hero { display:flex; align-items:center; gap:16px; padding:8px 0 18px; text-align:left; }
.start-wrap .shield-hero .start-sköld { width:76px; height:80px; margin:0; }
.start-wrap .shield-hero h1 { font-family:Georgia,serif; font-size:25px; margin:0 0 5px; }
.start-wrap .shield-hero p { font-size:12px; color:var(--text-ljus); margin:0; }
.start-season summary { cursor:pointer; font-weight:700; }
.start-season summary span { display:block; font-size:12px; font-weight:400; color:var(--text-ljus); margin-top:4px; }
.start-section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:22px; }
.start-section-heading h2 { font-family:Georgia,serif; font-size:23px; margin:0; }
.start-section-heading > span { font-size:10px; border:1px solid var(--linje); padding:4px 7px; border-radius:12px; }
.start-hub-links { display:grid; gap:9px; margin-top:12px; }
.start-hub-links a { display:flex; gap:13px; align-items:center; background:var(--kort); border:1px solid var(--linje); border-radius:13px; padding:16px; color:var(--text); text-decoration:none; }
.start-hub-links a:hover { border-color:var(--accent); }
.start-hub-links a > span:nth-child(2) { flex:1; min-width:0; }
.start-hub-links strong { display:block; font-size:16px; }
.start-hub-links small { display:block; color:var(--text-ljus); font-size:12px; line-height:1.5; margin-top:4px; }
.start-hub-symbol { color:var(--accent); font-family:Georgia,serif; font-size:22px; width:27px; flex-shrink:0; text-align:center; }
.start-footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; padding:22px 0; font-size:12px; }

/* ═════════════════════════════════════════════════════════════════════════
   ERGONOMI 26/9 (Claude) — svara direkt på Start, samma lugna stil.
   ═════════════════════════════════════════════════════════════════════════ */
.start-svar { margin-top: 14px; }
.svar-fraga { font-weight: 650; font-size: 15px; margin: 0 0 8px; }
.svarsval { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.svarsval-knapp {
  min-height: 52px; padding: 8px 4px;
  border-radius: 12px; border: 1.5px solid var(--linje);
  background: var(--kort); color: var(--text);
  font: inherit; font-size: 16px; font-weight: 650;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.svarsval-knapp:active { transform: translateY(1px); }
.svarsval-knapp--kommer { border-color: color-mix(in srgb, var(--ok) 55%, var(--linje)); }
.svarsval-knapp--vald.svarsval-knapp--kommer { background: var(--ok); border-color: var(--ok); color: #fff; }
.svarsval-knapp--vald.svarsval-knapp--kanske { background: var(--accent); border-color: var(--accent); color: #fff; }
.svarsval-knapp--vald.svarsval-knapp--avstar { background: var(--text-ljus); border-color: var(--text-ljus); color: var(--kort); }
[data-tema="mork"] .svarsval-knapp--vald { color: #12281e; }
.svarsval-knapp:disabled { opacity: .6; }
.kanske-rad { margin-top: 10px; }
.kanske-rad label { display: block; font-size: 13px; font-weight: 600; color: var(--text-ljus); margin-bottom: 4px; }
.kanske-rad-falt { display: flex; gap: 8px; }
.kanske-rad-falt .inmatning { flex: 1; min-width: 0; }
.kanske-rad-falt .knapp { flex: none; }
.start-svar .felruta { margin-top: 10px; }
.svar-not { font-size: 12px; color: var(--text-ljus); margin: 8px 0 0; }
.svar-klart {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--ok-bg); border-left: 3px solid var(--ok);
}
.svar-klart--kanske { background: var(--bg); border-left-color: var(--accent); }
.svar-klart--avstar { background: var(--bg); border-left-color: var(--text-dov); }
.svar-klart-text { font-weight: 650; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.svar-bock { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-size: 13px; background: var(--ok); color: #fff; }
.svar-klart--kanske .svar-bock { background: var(--accent); }
.svar-klart--avstar .svar-bock { background: var(--text-dov); }
.lanklik { background: none; border: none; padding: 6px 0; font: inherit; font-size: 14px; color: var(--primaer); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.svar-not .lanklik { font-size: 12px; padding: 2px 0; }
.start-passlank {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 0 0;
  border-top: 1px solid var(--linje); text-decoration: none; color: var(--text);
}
.start-passlank span { flex: 1; font-weight: 650; font-size: 15px; }
.start-passlank small { display: block; font-weight: 400; font-size: 12px; color: var(--text-ljus); margin-top: 2px; }
.start-passlank b { color: var(--accent); font-weight: 400; font-size: 18px; }
.start-push { margin-top: 12px; align-items: center; }

/* Kalendern: en framåtblickande visning */
.calendar-intro { font-size: 13px; color: var(--text-ljus); margin: -4px 4px 12px; }
.calendar-month { font-size: 15px; margin: 18px 4px 8px; }
.calendar-month:first-of-type { margin-top: 6px; }
.calendar-week--now { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.calendar-week .week-date { font-size: 12px; }
.calendar-past { margin: 0 0 6px; border: 1px solid var(--linje); border-radius: 13px; background: var(--kort); }
.calendar-past summary { padding: 12px 14px; cursor: pointer; font-weight: 650; font-size: 14px; }
.calendar-past summary span { color: var(--text-ljus); font-weight: 400; }
.past-list { border-top: 1px solid var(--linje); }
.past-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; text-decoration: none; color: var(--text); font-size: 13px; border-bottom: 1px solid var(--linje); }
.past-row:last-child { border-bottom: none; }
.past-when { color: var(--text-ljus); }
.past-nr { font-weight: 600; }
.past-res { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: right; }
#fler-veckor { margin-top: 6px; }
.calendar-week--now .week-today { outline: none; }
.week-today .week-date { color: var(--accent); }

/* Segmentväljare (tabellens lägen m.m.): en rad, tydligt valt läge */
.segment { display: flex; gap: 3px; padding: 3px; margin: 0 0 12px; background: var(--kort); border: 1px solid var(--linje); border-radius: 12px; }
.segment-knapp { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 6px 4px; border: none; border-radius: 9px; background: transparent; color: var(--text-ljus); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.segment-knapp--vald { background: var(--primaer); color: var(--kort); }
.stats-card .stats-columns { margin: 10px 0 0; font-size: 13px; }
.sa-raknas { margin-top: 10px; border-top: 1px solid var(--linje); padding-top: 8px; font-size: 12px; color: var(--text-ljus); }
.sa-raknas summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 4px 0; }
.sa-raknas p { margin: 6px 0 0; }

/* Besked: olästa först, prick i stället för knappar */
.besked-huvud { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
a.besked-item { display: block; text-decoration: none; color: var(--text); }
.besked-prick { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; }
.admin-nu { margin-bottom: 14px; border-top: 3px solid var(--accent); }
.admin-nu p { margin: 6px 0 12px; }

/* Säsongsregnet faller mellan innehållet och sidhuvud/bottennav */
.vy { position: relative; z-index: 1; }
.har-sasongsregn .sidhuvud-lank img { cursor: pointer; }
.boll-snurr { animation: boll-snurr .7s cubic-bezier(.3,1.4,.5,1); }
@keyframes boll-snurr { from { transform: rotate(-200deg) scale(.85); } to { transform: none; } }

/* ═══ Spec v2 (26/9 22:00): navigering ═══ */
.sidhuvud { position: sticky; }
.meny-knapp { background: none; border: none; color: inherit; padding: 8px 4px 8px 10px; cursor: pointer; display: inline-flex; align-items: center; opacity: .92; }
.huvudmeny {
  position: absolute; top: calc(100% - 4px); right: 10px; z-index: 60;
  min-width: 210px; padding: 6px; border-radius: 14px;
  background: var(--kort); color: var(--text); border: 1px solid var(--linje);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  display: flex; flex-direction: column;
}
.huvudmeny[hidden] { display: none; }
.huvudmeny-vem { font-size: 12px; color: var(--text-ljus); padding: 8px 12px 6px; border-bottom: 1px solid var(--linje); margin-bottom: 4px; }
.huvudmeny a, .huvudmeny button {
  display: block; text-align: left; padding: 12px; border-radius: 9px;
  color: var(--text); text-decoration: none; font: inherit; font-size: 15px; font-weight: 600;
  background: none; border: none; cursor: pointer;
}
.huvudmeny a:hover, .huvudmeny button:hover, .huvudmeny a:focus-visible, .huvudmeny button:focus-visible { background: var(--bg); }
.huvudmeny button { color: var(--text-ljus); font-weight: 500; }
.statistiksajt-lank { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--linje); border-radius: 13px; background: var(--kort); color: var(--text); text-decoration: none; }
.statistiksajt-lank span { flex: 1; font-weight: 650; font-size: 15px; }
.statistiksajt-lank small { display: block; font-weight: 400; font-size: 12px; color: var(--text-ljus); margin-top: 2px; }
.statistiksajt-lank b { color: var(--accent); font-weight: 400; }

/* ═══ Spec v2: Start ═══ */
.start-wrap { display: flex; flex-direction: column; gap: 12px; }
.start-wrap > .kort { margin: 0; }
.stor-skold { display: block; width: min(100%, 440px); height: auto; margin: -4px auto -6px; filter: drop-shadow(0 10px 16px #0005); }

/* Svarsremsan: smal, alltid överst på Start, klistrar under sidhuvudet */
.svarsremsa {
  position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 15;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px; border-radius: 14px;
  background: var(--kort); border: 1px solid var(--linje);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.svarsremsa--svarat, .svarsremsa--info { flex-direction: row; align-items: center; gap: 10px; }
.remsa-rad { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.remsa-nar { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--text-ljus); white-space: nowrap; }
.remsa-fraga { font-weight: 700; font-size: 15px; }
.remsa-val { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.remsa-knapp {
  min-height: 44px; border-radius: 10px; border: 1.5px solid var(--linje);
  background: var(--bg); color: var(--text); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
}
.remsa-knapp--kommer { border-color: color-mix(in srgb, var(--ok) 55%, var(--linje)); }
.remsa-knapp--vald.remsa-knapp--kommer { background: var(--ok); border-color: var(--ok); color: #fff; }
.remsa-knapp--vald.remsa-knapp--kanske { background: var(--accent); border-color: var(--accent); color: #fff; }
.remsa-knapp--vald.remsa-knapp--avstar { background: var(--text-ljus); border-color: var(--text-ljus); color: var(--kort); }
[data-tema="mork"] .remsa-knapp--vald { color: #12281e; }
.remsa-knapp:disabled { opacity: .6; }
.remsa-svar { flex: 1; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; min-width: 0; }
.svarsremsa--kommer { border-left: 4px solid var(--ok); }
.svarsremsa--kanske { border-left: 4px solid var(--accent); }
.svarsremsa--avstar { border-left: 4px solid var(--text-dov); }
.svarsremsa--kanske .svar-bock { background: var(--accent); }
.svarsremsa--avstar .svar-bock { background: var(--text-dov); }
.remsa-avbryt { align-self: flex-start; font-size: 13px; padding: 0; }
.svarsremsa .kanske-rad { margin: 0; }
.svarsremsa .felruta { margin: 0; }

.start-kort { display: flex; flex-direction: column; gap: 6px; }
.start-kort .next-training-date { margin: 2px 0; }
.start-tom { color: var(--text-ljus); font-size: 14px; margin: 4px 0; }
.start-lank { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--linje); color: var(--text); text-decoration: none; font-weight: 650; font-size: 15px; }
.start-lank b { color: var(--accent); font-weight: 400; font-size: 18px; }
.rapportera-knapp { margin-top: 8px; min-height: 56px; font-size: 17px; }

/* Vilka kommer */
.narvaro { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--linje); }
.narvaro-grupp h2 { font-size: 14px; margin: 0 0 3px; display: flex; align-items: baseline; gap: 6px; }
.narvaro-antal { font-size: 20px; font-variant-numeric: tabular-nums; }
.narvaro-grupp--ja .narvaro-antal { color: var(--ok); }
.narvaro-grupp--kanske .narvaro-antal { color: var(--accent); }
.narvaro-grupp--tyst .narvaro-antal { color: var(--text-dov); }
.narvaro-grupp p { margin: 0; font-size: 14px; line-height: 1.55; }
.narvaro-grupp--tyst p { color: var(--text-ljus); }
.kanske-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kanske-lista li { font-size: 14px; }
.kanske-lista span { color: var(--text-ljus); font-style: italic; }
.kanske-lista span::before { content: " – "; font-style: normal; }
.narvaro-grupp--nej summary { cursor: pointer; font-size: 13px; color: var(--text-ljus); }
.narvaro-grupp--nej p { margin-top: 4px; color: var(--text-ljus); }

/* Efter passet */
.efter-resultat { font: 700 52px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.02em; color: var(--primaer); font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.efter-lagen { display: flex; flex-direction: column; gap: 6px; }
.efter-lag { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; }
.efter-lag-titel { flex: none; width: 72px; font-size: 12px; font-weight: 700; color: var(--text-ljus); padding-top: 1px; }
.efter-lag--vinnare .efter-lag-titel { color: var(--ok); }
.referat { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--linje); }
.referat h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-ljus); margin: 0 0 6px; }
.referat p { font-family: Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.55; margin: 0 0 10px; max-width: 62ch; }

/* Tabellutdrag */
.start-tabell h2 { font-size: 15px; margin: 0 0 8px; }
.utdrag { list-style: none; margin: 0; padding: 0; }
.utdrag li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linje); font-size: 15px; }
.utdrag li:last-child { border-bottom: none; }
.utdrag-plats { width: 20px; color: var(--text-dov); font-variant-numeric: tabular-nums; }
.utdrag-namn { flex: 1; font-weight: 600; }
.utdrag-poang { font-weight: 700; font-variant-numeric: tabular-nums; }
.utdrag-jag { background: var(--bg); margin: 0 -8px; padding-left: 8px !important; padding-right: 8px !important; border-radius: 8px; }
.utdrag-glapp { justify-content: center; color: var(--text-dov); padding: 0 !important; border: none !important; }
.rorelse-lika { color: var(--text-dov); }
.start-fot { text-align: center; font-size: 13px; margin: 6px 0 0; }
.start-fot a { color: var(--text-ljus); }

/* Bottenblad (popup) */
.bladd-bak { position: fixed; inset: 0; z-index: 80; background: rgba(10, 20, 15, .45); display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
.bladd { width: 100%; max-width: 480px; background: var(--kort); color: var(--text); border-radius: 18px; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,.25); }
.bladd h2 { font-size: 19px; margin: 0 0 8px; }
.bladd p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; }
.bladd-knappar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
@media (min-width: 560px) { .bladd-bak { align-items: center; } }

/* ═══ Spec v2: Rapportera dagens träning ═══ */
.rapportera { display: flex; flex-direction: column; gap: 12px; }
.rapportera h1 { margin: 0; font-size: 24px; }
.rap-tillbaka { margin: 0; font-size: 14px; }
.rap-datum { margin: -6px 0 0; color: var(--text-ljus); font-size: 14px; }
.rap-steg { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.rap-steg h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 0; }
.rap-steg h2 small { font-weight: 400; font-size: 12px; color: var(--text-ljus); }
.rap-nr { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; background: var(--primaer); color: var(--kort); font-size: 14px; }
.rap-steg .segment { margin: 0; }
.rap-steg .hjalp { margin: 0; }
.rap-lagen { display: grid; gap: 8px; }
.rap-lag { border: 1.5px solid var(--linje); border-radius: 12px; padding: 10px; background: var(--bg); }
.rap-lag--aktiv { border-color: var(--accent); }
.rap-lag-huvud { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.rap-lag-huvud h3 { margin: 0; font-size: 15px; }
.rap-lag-huvud h3 span { color: var(--text-ljus); font-weight: 400; }
.rap-lag-mark { font-size: 12px; color: var(--accent); font-weight: 700; }
.rap-lag-huvud .lanklik { font-size: 13px; padding: 2px 0; }
.rap-lag-spelare { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rap-spelare { min-height: 38px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--linje); background: var(--kort); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.rap-spelare--vald { border-color: var(--primaer); box-shadow: 0 0 0 2px var(--primaer) inset; }
.rap-spelare--pool { background: transparent; border-style: dashed; }
.rap-sen { font-size: 11px; color: var(--felande); font-weight: 700; }
.rap-atgard { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 4px; }
.rap-gast { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; border: 1.5px dotted var(--linje); font-size: 14px; }
.rap-gast .lanklik { padding: 0 2px; text-decoration: none; }
.rap-pool { border-top: 1px solid var(--linje); padding-top: 10px; }
.rap-pool-rubrik { font-size: 13px; color: var(--text-ljus); margin-bottom: 6px; }
.rap-pool-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.rap-pool-mer { display: flex; gap: 16px; margin-top: 6px; }
.rap-pool-mer .lanklik { font-size: 13px; }
.rap-gastrad { display: flex; gap: 8px; }
.rap-gastrad .inmatning { flex: 1; min-width: 0; }
.rap-mal { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
.rap-mal-lag, .rap-seger { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--text-ljus); }
.rap-mal-lag .inmatning, .rap-seger .inmatning { width: 84px; text-align: center; font-size: 28px; font-weight: 700; min-height: 60px; }
.rap-mal-streck { font-size: 28px; font-weight: 700; padding-bottom: 12px; }
.rap-segrar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; justify-items: center; }
.rap-seger small { font-weight: 400; }
.rap-overtid { border: 1.5px solid var(--accent); border-radius: 12px; padding: 12px 14px 6px; margin: 0; display: block; }
.rap-overtid legend { float: left; width: 100%; font-size: 14px; font-weight: 700; padding: 0; margin: 0 0 4px; line-height: 1.35; }
.rap-overtid legend + label { clear: both; }
.rap-overtid label { display: flex; gap: 8px; align-items: center; min-height: 36px; font-size: 15px; }
.rap-summa { margin: 0; font-size: 14px; text-align: center; }
.rap-publicera { min-height: 56px; font-size: 17px; }
.rap-efter { text-align: center; margin: -4px 0 0; }
.rap-klar { font-size: 15px; }
.rap-mottagare-knapp { align-self: flex-start; font-size: 13px; color: var(--text-ljus); }
.rap-mottagare { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 14px; }
.rap-mottagare label { display: flex; gap: 8px; align-items: center; min-height: 36px; }
.rap-kallelse-knappar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rap-kallelse-knappar .knapp { width: 100%; padding-left: 8px; padding-right: 8px; }
.rap-uppehall { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--linje); }
.rap-uppehall label { font-size: 14px; font-weight: 600; }
.rap-senare { margin: 2px 0 0; text-align: center; font-size: 13px; }
.rap-instruktion { margin: 0 0 10px; }
.rap-overtid + .rap-overtid { margin-top: 10px; }

/* Ekonomi: kategorier efter antal pass */
.eko-kat { list-style: none; margin: 8px 0; padding: 0; }
.eko-kat li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--linje); font-size: 14px; }
.eko-kat li:last-child { border-bottom: 0; }
.eko-kat-falt { border: 0; padding: 0; margin: 14px 0 6px; }
.eko-kat-falt legend { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.eko-kat-rad { display: grid; grid-template-columns: 2.6em 64px 2.6em 64px 1em; justify-content: start; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.eko-kat-rad .inmatning { text-align: center; padding-left: 4px; padding-right: 4px; }
.efter-not { margin: -4px 0 12px; font-size: 13px; color: var(--text-dov); }

/* Ekonomi: hela uträkningen för admin */
.eko-uttrakning { margin: 8px 0 14px; }
.eko-uttrakning p { margin: 0 0 8px; }
.eko-tabell-wrap { overflow-x: auto; }
.eko-tabell { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.eko-tabell th { text-align: right; font-weight: 600; color: var(--text-dov); padding: 6px 4px; border-bottom: 1px solid var(--linje); white-space: nowrap; }
.eko-tabell td { text-align: right; padding: 7px 4px; border-bottom: 1px solid var(--linje); white-space: nowrap; }
.eko-tabell th:first-child, .eko-tabell td:first-child { text-align: left; }

/* Adminbrytaren i sidhuvudet: adminvy ↔ spelarvy */
.adminbrytare { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; background: none; border: 1px solid #d6b27466; color: #f4ebd9; border-radius: 999px; padding: 5px 10px 5px 5px; font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .02em; cursor: pointer; min-height: 30px; }
.adminbrytare[hidden] { display: none; }
.adminbrytare-spar { position: relative; width: 26px; height: 16px; border-radius: 999px; background: #d6b274; transition: background .2s; }
.adminbrytare-knopp { position: absolute; top: 2px; left: 12px; width: 12px; height: 12px; border-radius: 50%; background: #203c35; transition: left .2s; }
.adminbrytare--spelare { border-color: #f4ebd944; }
.adminbrytare--spelare .adminbrytare-spar { background: #f4ebd933; }
.adminbrytare--spelare .adminbrytare-knopp { left: 2px; background: #f4ebd9; }
/* Mobil: bara ordet, som en tydlig bricka (mässing = admin, kontur = spelare) */
@media (max-width: 480px) {
  .adminbrytare { padding: 6px 9px; min-height: 28px; margin-left: 6px; }
  .adminbrytare-spar { display: none; }
  .adminbrytare:not(.adminbrytare--spelare) { background: #d6b274; border-color: #d6b274; color: #203c35; }
  .sidhuvud .titel { font-size: 17px; }
  .sidhuvud .besked-bell { margin-left: 2px; min-width: 40px; }
  .meny-knapp { padding-left: 6px; }
}
@media (max-width: 370px) { .sidhuvud .titel { font-size: 15px; } .sidhuvud .sidhuvud-lank { gap: 7px; } .sidhuvud img { width: 34px; height: 34px; } .adminbrytare { padding: 6px 7px; } }
@media (max-width: 340px) { .sidhuvud .titel { display: none; } }
@media (prefers-reduced-motion: reduce) { .adminbrytare-spar, .adminbrytare-knopp { transition: none; } }

/* Medlemmar: en rad per medlem, en kolumn per inställning */
.medlem-tabell { margin-top: 6px; }
.medlem-rad { display: grid; grid-template-columns: minmax(0,1fr) 52px 60px 74px; align-items: center; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--linje); }
.medlem-rad > span:not(.medlem-namn) { justify-self: center; }
.medlem-rad--huvud > span:first-child { justify-self: start; }
.medlem-rad--huvud { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dov); padding-top: 0; }
.medlem-namn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medlem-namn small { font-weight: 400; color: var(--text-dov); }
.medlem-tom { color: var(--text-dov); }
.medlem-knapp { background: none; border: 1px solid var(--linje); color: inherit; border-radius: 999px; font-size: 12px; padding: 6px 9px; min-height: 32px; cursor: pointer; }
.medlem-bekrafta { grid-column: 1 / -1; font-size: 14px; padding: 10px 12px; margin-top: 4px; border-radius: 10px; border: 1px solid var(--accent); }
.medlem-bekrafta p { margin: 0 0 10px; line-height: 1.45; }
.medlem-bekrafta span { display: flex; gap: 14px; align-items: center; }
.medlem-status { min-height: 1.4em; margin: 10px 0 4px; font-size: 14px; }
.vaxel--liten .vaxel-spar { width: 36px; height: 22px; }
.vaxel--liten .vaxel-knopp { width: 16px; height: 16px; }
.vaxel--liten input:checked + .vaxel-spar .vaxel-knopp { left: 17px; }
/* Kalendern: admin kallar direkt från en torsdag */
.week-kalla { margin-top: 6px; width: 100%; min-height: 34px; border-radius: 10px; border: 1px dashed var(--accent); background: none; color: inherit; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; cursor: pointer; padding: 6px 4px; }
.bladd--form { max-height: 88vh; overflow-y: auto; padding-top: 8px; }
.bladd--form .kort { box-shadow: none; border: 0; background: none; padding: 8px 0 0; margin: 0; }
.bladd--form .kort::before { display: none; }
/* (äldre) Medlemmar och admin */
.adminratt-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.adminratt-rad { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linje); }
.adminratt-rad:last-child { border-bottom: 0; }
.adminratt-namn { font-weight: 600; }
.adminratt-namn small { font-weight: 400; color: var(--text-dov); margin-left: 4px; }
.adminratt-status { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; }
.vaxel { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 40px; font-size: 13px; color: var(--text-dov); }
.vaxel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vaxel-spar { position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--linje); transition: background .2s; flex-shrink: 0; }
.vaxel-knopp { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .2s; }
.vaxel input:checked + .vaxel-spar { background: var(--primaer); }
.vaxel input:checked + .vaxel-spar .vaxel-knopp { left: 19px; }
.vaxel input:focus-visible + .vaxel-spar { outline: 2px solid var(--accent); outline-offset: 2px; }
.vaxel--last { cursor: default; opacity: .55; }

.utdrag-alla { margin: 10px 0 2px; border-top: 1px solid var(--linje); padding-top: 10px; }
.utdrag-alla summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--primaer); list-style: none; }
.utdrag-alla summary::-webkit-details-marker { display: none; }
.utdrag-alla summary::before { content: '▸ '; }
.utdrag-alla[open] summary::before { content: '▾ '; }
.utdrag-alla summary span { color: var(--text-dov); font-weight: 400; }
.utdrag-alla .utdrag { margin-top: 6px; }

/* Kvällens lag på startkortet */
.start-underrubrik { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dov); margin: 16px 0 6px; }
.lotta-knapp { margin: 14px 0 4px; }

/* Matchklockan */
.klocka { text-align: center; }
.klocka-huvud { display: flex; justify-content: space-between; align-items: baseline; }
.klocka-huvud h2 { margin: 0; font-size: 17px; }
.klocka-langd { font-size: 13px; color: var(--text-dov); }
.klocka-tid { font: 700 76px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 14px 0 16px; color: var(--primaer); }
.klocka--gar .klocka-tid { color: var(--text); }
.klocka-val { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.klocka-chip, .klocka-steg { min-width: 46px; min-height: 42px; border-radius: 999px; border: 1px solid var(--linje); background: none; color: inherit; font: 600 16px/1 inherit; font-family: inherit; cursor: pointer; }
.klocka-steg { min-width: 42px; font-size: 20px; color: var(--text-dov); }
.klocka-chip--vald { background: var(--primaer); border-color: var(--primaer); color: var(--kort); }
.klocka-knappar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.klocka-knappar .knapp { min-height: 54px; font-size: 18px; }
.klocka-tyst { min-height: 60px; font-size: 20px; }
.klocka--larm { animation: klocka-blink .6s steps(2, jump-none) infinite; border-color: var(--accent); }
.klocka--larm .klocka-tid { color: var(--accent); }
@keyframes klocka-blink { 50% { box-shadow: 0 0 0 4px var(--accent); } }
@media (prefers-reduced-motion: reduce) { .klocka--larm { animation: none; box-shadow: 0 0 0 4px var(--accent); } }
.start-tabell:has(.utdrag-alla[open]) > .utdrag { display: none; }
.start-tabell:has(.utdrag-alla[open]) .utdrag-alla { border-top: 0; margin-top: 0; padding-top: 0; }

/* ═══ Bilderna (grafiksteget 27/9) ═══ */
.rum-bild { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto 6px; filter: drop-shadow(0 6px 10px #0003); }
.popup-klocka { float: right; width: 84px; height: auto; margin: -6px -4px 6px 12px; filter: drop-shadow(0 4px 8px #0004); }
/* Gympasalen bakom startsidans topp: dag i ljust tema, kväll i mörkt. Knappt synlig. */
body.sida-start::before {
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: 75vh; z-index: 0; pointer-events: none;
  background: url(/ikoner/bilder/sal-dag.webp) center top / cover no-repeat;
  opacity: .2;
  -webkit-mask-image: linear-gradient(#000 35%, transparent);
          mask-image: linear-gradient(#000 35%, transparent);
}
[data-tema="mork"] body.sida-start::before { background-image: url(/ikoner/bilder/sal-kvall.webp); opacity: .28; }
@media (min-width: 760px) { body.sida-start::before { left: 50%; width: 760px; transform: translateX(-50%); } }

/* ═══ Lotta lagen — ett steg ═══ */
.lotta-rubrik { margin: 4px 0 2px; font-size: 24px; }
.lotta-meta { color: var(--text-dov); margin: 0 0 12px; font-size: 14px; }
.lotta-del h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0 0 4px; }
.lotta-antal { background: var(--primaer); color: var(--kort); border-radius: 999px; padding: 2px 10px; font-size: 14px; }
.lotta-namn { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.lotta-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--linje); background: none; color: inherit; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.lotta-chip--pa { background: var(--primaer); border-color: var(--primaer); color: var(--kort); }
.lotta-chip small, .lotta-spelare small { font-weight: 400; opacity: .75; font-size: 12px; }
.lotta-chip--gast { padding-right: 4px; }
.lotta-bort { background: none; border: 0; color: inherit; min-width: 32px; min-height: 32px; font-size: 14px; cursor: pointer; opacity: .85; }
.lotta-chip--liten { min-height: 38px; padding: 6px 12px; font-size: 14px; }
.lotta-chip--isar { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.lotta-chip--avb { border-style: dashed; border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.lotta-chip:disabled { opacity: .4; cursor: default; }
.lotta-gast { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.lotta-storlek { text-align: center; color: var(--text-dov); margin: 10px 0 4px; font-size: 14px; min-height: 1.3em; }
.lotta-sarskilt-knapp { display: block; margin: 4px auto 0; font-size: 14px; }
.lotta-sarskilt { border-top: 1px solid var(--linje); margin-top: 12px; }
.lotta-sarskilt h3 { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dov); margin: 14px 0 2px; }
.lotta-knapp-stor { min-height: 56px; font-size: 18px; margin-top: 14px; }
.lotta-lagen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.lotta-lagen--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lotta-lag h3 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 6px; }
.lotta-lag h3 span { color: var(--text-dov); font-weight: 400; margin-left: 2px; }
.lotta-lag h3 em { display: block; font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--accent); font-size: 12px; }
.lotta-spelare { display: block; width: 100%; text-align: left; padding: 10px; border: 1px solid var(--linje); border-radius: 10px; background: none; color: inherit; margin-bottom: 6px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
.lotta-lagen--3 .lotta-spelare { padding: 9px 7px; font-size: 14px; }
.lotta-vila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; }
.lotta-jamnhet { font-size: 14px; margin: 12px 0 4px; line-height: 1.5; }
.lotta-jamnhet small { color: var(--text-dov); }

/* Inför passet: kompakt kort under skölden */
.start-kort--kompakt { padding-top: 14px; padding-bottom: 6px; }
.start-kort--kompakt .start-lank { margin-top: 8px; }
.kompakt-nar { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.kompakt-etikett { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dov); margin-bottom: 2px; }
.kompakt-om { font-weight: 400; font-size: 13px; color: var(--text-dov); margin-left: 4px; }
.start-kort--kompakt .lotta-knapp { margin: 12px 0 2px; min-height: 52px; font-size: 17px; }
.start-kort--kompakt .efter-lagen { margin-top: 10px; }
.start-lank-not { font-weight: 400; color: var(--text-dov); margin-left: 8px; font-size: 14px; }

.lotta-register-knapp { display: block; font-size: 14px; margin: 0 0 10px; }
.lotta-register { border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); padding: 10px 0 2px; margin-bottom: 12px; }
.lotta-ny { margin-top: 6px; }
.lotta-ny-knappar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.lotta-ny .hjalp { margin: 8px 0 0; }
.kompakt-text { margin: 4px 0 10px; font-size: 14px; color: var(--text-dov); }

/* Ny person i hallen */
.ny-person .falt { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.ny-person .falt .inmatning { margin-top: 4px; }
.ny-person .hjalp { font-weight: 400; }
.kravs { font-size: 12px; font-weight: 400; color: var(--accent); }
.ny-traff { font-size: 14px; padding: 10px 12px; margin: -2px 0 12px; border: 1px solid var(--accent); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.ny-kryss { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 15px; margin: 2px 0 12px; }
.ny-kryss input { width: 20px; height: 20px; }

/* Lotta och hantera lag: bygg lagen med dra och släpp */
.lotta-huvud { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lotta-huvud .lotta-storlek { margin: 0; text-align: right; }
.lotta-bygge .segment { margin: 8px 0 4px; }
.lotta-regel { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 2px; font-size: 12.5px; line-height: 1.45; color: var(--text-dov); cursor: pointer; }
.lotta-regel input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--primaer); }
.lotta-regel b { color: var(--text); font-weight: 600; }
.lotta-tips { margin: 8px 0 0; font-size: 13px; }
.lotta-lag, .lotta-pool { border: 1.5px dashed var(--linje); border-radius: 12px; padding: 8px; min-height: 96px; transition: border-color .15s, background-color .15s; }
.lotta-lagen--3 .lotta-lag { padding: 6px; }
.lotta-pool { margin-top: 10px; min-height: 0; }
.lotta-pool h3 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 6px; }
.lotta-pool h3 span { color: var(--text-dov); font-weight: 400; margin-left: 2px; }
.lotta-pool-namn { display: flex; flex-wrap: wrap; gap: 6px; }
.lotta-pool-namn .lotta-spelare { width: auto; margin: 0; }
.lotta-tomt { margin: 6px 0; text-align: center; color: var(--text-dov); font-size: 13px; }
.lotta-lag--mal { border-color: var(--primaer); cursor: pointer; }
.lotta-lag--over { border-style: solid; border-color: var(--primaer); background: color-mix(in srgb, var(--primaer) 10%, transparent); }
.lotta-spelare { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; background: var(--kort); }
.lotta-spelare--vald { border-color: var(--primaer); box-shadow: 0 0 0 2px var(--primaer); }
.lotta-spelare--dras { opacity: .35; }
.lotta-spok { position: fixed; left: 0; top: 0; width: auto; max-width: 60vw; margin: 0; pointer-events: none; z-index: 1000; box-shadow: 0 8px 22px rgba(0,0,0,.25); border-color: var(--primaer); background: var(--kort); }
.lotta-nal { color: var(--primaer); opacity: 1 !important; font-size: 10px !important; vertical-align: 1px; }
.lotta-spelare small[title^="Placerad"] { color: var(--accent); font-weight: 700; opacity: 1; }
.lotta-rensa { text-align: center; margin: 8px 0 0; font-size: 14px; }
.pass-admin-knappar { display: grid; gap: 8px; margin-top: 12px; }
.pass-admin-knappar .knapp { text-align: center; }

/* Matchklockan: gemensam, stor paus, halvtid, ljud */
.klocka-huvud { gap: 8px; }
.klocka-huvud h2 { margin-right: auto; }
.klocka-ljudknapp { font-size: 13px; }
.klocka-tid { font-size: clamp(64px, 22vw, 92px); }
.klocka-stor { min-height: 64px !important; font-size: 20px !important; }
.klocka-paus { background: var(--accent); border-color: var(--accent); color: #fff; }
.klocka--paus .klocka-tid { color: var(--text-dov); animation: klocka-puls 1.4s ease-in-out infinite; }
.klocka--paus .klocka-langd { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
@keyframes klocka-puls { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .klocka--paus .klocka-tid { animation: none; } }
.klocka-tid--slut { color: var(--accent); margin-bottom: 4px; }
.klocka-slutrad { margin: 0 0 14px; color: var(--text-dov); font-size: 14px; }
.klocka-rapport { margin-top: 10px; min-height: 58px; font-size: 18px; }
.klocka-hjalp { margin: 8px 0 0; font-size: 13px; }
.klocka-lankar { margin: 4px 0 12px; font-size: 14px; color: var(--text-dov); }
.klocka-halvtid { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linje); font-size: 15px; }
.klocka-halvtid b { font-variant-numeric: tabular-nums; }
.klocka-halvtid-form { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linje); }
.klocka-halvtid-form label { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-ljus); }
.klocka-halvtid-form .inmatning { width: 64px; min-height: 52px; text-align: center; font-size: 24px; font-weight: 700; }
.klocka-halvtid-form .rap-mal-streck { font-size: 22px; padding-bottom: 10px; }
.klocka-halvtid-form .knapp { min-height: 52px; }
.klocka-ljud { text-align: left; margin: 12px 0 4px; padding: 12px; border-radius: 12px; background: var(--bakgrund, transparent); border: 1px solid var(--linje); }
.klocka-ljud .hjalp { margin: 8px 0 0; font-size: 12.5px; }
.klocka-ljud-rubrik { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dov); }
.klocka-val--ljud { justify-content: flex-start; margin-bottom: 10px; }
.klocka-val--ljud .klocka-chip { padding: 0 12px; font-size: 14px; min-height: 38px; }
.klocka-annan { display: flex; justify-content: center; gap: 8px; margin: 0 0 12px; }
.klocka-annan .inmatning { width: 110px; text-align: center; }
.rap-halvtid { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linje); }
.rap-halvtid-rubrik { font-size: 14px; font-weight: 700; margin-right: 4px; }
.rap-halvtid-rubrik small { font-weight: 400; color: var(--text-dov); }
.rap-halvtid .inmatning { width: 56px; min-height: 46px; text-align: center; font-size: 20px; font-weight: 700; }
.rap-halvtid .rap-mal-streck { font-size: 20px; padding: 0; }
.rap-referat-hopfallt summary { cursor: pointer; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 0; list-style: none; }
.rap-referat-hopfallt summary::-webkit-details-marker { display: none; }
.rap-referat-hopfallt summary small { font-weight: 400; font-size: 13px; color: var(--text-dov); margin-left: 8px; }
.rap-referat-hopfallt[open] summary { margin-bottom: 10px; }

.lotta-regel-varfor { display: block; margin-top: 4px; font-size: 12px; opacity: .85; }
.referat-knapp { margin: 12px 0 4px; }
.efter-kort .referat-knapp { margin-top: 16px; }
.ref-fakta .efter-lagen { margin-top: 12px; }
.ref-resultat { display: flex; gap: 28px; justify-content: center; text-align: center; }
.ref-resultat span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dov); }
.ref-resultat b { font-size: 34px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ref-not { text-align: center; margin: 6px 0 0; font-size: 13px; color: var(--accent); font-weight: 600; }

/* ─── Passläget ────────────────────────────────────────────────────────── */
/* Rund Pass-knapp i mitten av bottenmenyn (bara admin) */
.bottennav a.nav-pass { overflow: visible; }
.bottennav a.nav-pass.aktiv { background: none; box-shadow: none; }
.nav-pass-rund { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin: -26px auto 0; border-radius: 50%; background: var(--primaer); border: 4px solid var(--kort); box-shadow: 0 4px 14px #0003; }
.nav-pass-rund img { width: 40px; height: 40px; border-radius: 50%; }
.bottennav a.nav-pass .nav-label { color: var(--primaer); }
/* I passläget: bara stegen */
.bottennav--pass { border-top: 2px solid var(--accent); }
.bottennav--pass a { position: relative; }
.bottennav--pass a.klar { color: var(--primaer); }
.bottennav--pass a.klar .ikon svg { stroke-width: 2.4; }
.bottennav--pass .nav-label { display: inline-flex; align-items: center; gap: 3px; }
.nav-steg { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid currentColor; font-size: 9.5px; line-height: 1; }
.bottennav--pass a.aktiv .nav-steg { background: var(--primaer); border-color: var(--primaer); color: var(--kort); }
@media (max-width: 370px) { .bottennav--pass .nav-steg { display: none; } }
/* Remsan överst */
.passlage-topp { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 9px 12px; border-radius: 12px; background: var(--primaer); color: var(--kort); font-size: 13px; }
.passlage-etikett { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.passlage-etikett::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e2574c; box-shadow: 0 0 0 3px #e2574c44; animation: passlage-puls 1.8s ease-in-out infinite; }
@keyframes passlage-puls { 50% { box-shadow: 0 0 0 6px #e2574c11; } }
@media (prefers-reduced-motion: reduce) { .passlage-etikett::before { animation: none; } }
.passlage-vilket { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.passlage-lamna { margin-left: auto; color: var(--kort); font-weight: 700; white-space: nowrap; }
.passlage-andra { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--text-dov); }
.passlage-lagen .efter-lagen { margin-top: 0; }
.lotta-narvaro { margin: 0 0 8px; font-size: 14px; color: var(--text-dov); }
.lotta-avbytare { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 2px; }
.lotta-avbytare-rubrik { font-size: 14px; font-weight: 700; margin-right: 4px; }
.lotta-avbytare-rubrik small { font-weight: 400; color: var(--text-dov); }
.lotta-lag h3 em + em { margin-top: 0; }
.lotta-vila small { color: var(--text-dov); }
.lotta-sparat { margin: 10px 0 0; }
/* Rapporten */
.rap-checklista { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; }
.rap-checklista li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linje); font-size: 13px; font-weight: 600; color: var(--text-dov); background: var(--kort); }
.rap-checklista li.klar { background: var(--primaer); border-color: var(--primaer); color: var(--kort); }
.rapportera > .kort, .rapportera > section { margin-bottom: 14px; }
.rap-referat h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 0 0 10px; }
.rap-referat h2 small { font-weight: 400; font-size: 12px; color: var(--text-ljus); }
.rap-referat .hjalp { margin: 6px 0 10px; font-size: 13px; }
.rap-kallelse-rubrik { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 8px 0 10px; }
.rap-chip small { font-weight: 400; opacity: .75; font-size: 12px; }
.rap-pool .lotta-pool-namn .lotta-spelare { width: auto; margin: 0; }
.rap-atgard { align-items: center; margin-top: 8px; font-size: 14px; }
.rap-atgard span { flex-basis: 100%; }

.rap-mottagare-inaktiva { font-size: 14px; }
.rap-mottagare-inaktiva > summary { cursor: pointer; color: var(--text-ljus); font-size: 13px; padding: 6px 0; }

/* ─── Orben: träkulan som meny (2026-09-28) ────────────────────────────── */
.orb { display: none; }
.bottennav--orb { justify-content: center; align-items: flex-end; min-height: 58px; padding-left: 0; padding-right: 0; }
.bottennav--orb .orb {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 0 0 6px; margin-top: -34px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; position: relative; z-index: 2;
}
.orb-kula {
  display: flex; align-items: center; justify-content: center;
  width: 78px; height: 78px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3b6a57, var(--primaer) 70%);
  border: 4px solid var(--kort);
  box-shadow: 0 6px 18px #0004, inset 0 -4px 10px #0003;
  transition: transform .25s ease, box-shadow .25s ease;
}
.orb-kula img {
  width: 64px; height: 64px; border-radius: 50%;
  filter: drop-shadow(0 2px 3px #0005);
  transition: transform .7s cubic-bezier(.2, .9, .25, 1.15);
}
.orb:active .orb-kula { transform: scale(.94); }
.orb-oppen .orb-kula { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent), 0 8px 24px #0005; }
.orb-oppen .orb-kula img { transform: rotate(360deg); }
.orb-plats { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--primaer); min-height: 13px; }

/* Menyvalen ligger gömda bakom kulan och fälls ut som en solfjäder. */
.bottennav--orb > a[data-nav] {
  position: absolute; left: 50%; top: 5px; z-index: 1;
  flex: none; width: 70px; margin: 0; padding: 0; gap: 3px;
  display: flex; flex-direction: column; align-items: center; background: none; box-shadow: none;
  transform: translate(-50%, -50%) scale(.2); opacity: 0; pointer-events: none;
  transition: transform .38s cubic-bezier(.2, .9, .3, 1.25), opacity .2s ease;
  transition-delay: 0ms;
}
.bottennav--orb > a[data-nav] .ikon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--kort); border: 1px solid var(--linje); box-shadow: 0 6px 16px #0003;
  color: var(--primaer); font-size: 24px;
}
.bottennav--orb > a[data-nav] .ikon img { width: 30px; height: 30px; }
.bottennav--orb > a[data-nav] .nav-label {
  font-size: 12px; font-weight: 700; color: var(--primaer); white-space: nowrap;
  background: var(--kort); padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 6px #0003;
}
.bottennav--orb > a[data-nav].aktiv { background: none; box-shadow: none; }
.bottennav--orb > a[data-nav].aktiv .ikon { border: 2px solid var(--accent); background: var(--bg); }
.bottennav--orb.orb-oppen > a[data-nav] {
  opacity: 1; pointer-events: auto;
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(1);
  transition-delay: var(--fordrojning, 0ms);
}
.bottennav--orb > a.nav-pass .ikon { background: var(--primaer); border-color: var(--primaer); }

.orb-bak {
  position: fixed; inset: 0; z-index: 29;
  background: #0f1a1459; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.orb-bak.synlig { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .orb-kula img, .bottennav--orb > a[data-nav] { transition: opacity .15s ease; }
  .orb-oppen .orb-kula img { transform: none; }
}

/* Passet i ord (spelarnas vy av matchklockan på startsidan) */
.klocka-lage { font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--primaer); text-align: center; padding: 14px 6px 6px; }

/* Orben i 3D: kulan ritas i en canvas; ljuset står still, träet rullar. */
.orb-canvas { width: 70px; height: 70px; display: block; border-radius: 50%; touch-action: none; cursor: grab; }
.orb-canvas:active { cursor: grabbing; }
.orb-3d .orb-kula { background: radial-gradient(circle at 50% 38%, #2f5a49, var(--primaer) 72%); }
.orb-3d.orb-oppen .orb-kula img { transform: none; }