:root {
  --bg: #f7f6f2;
  --kort: #ffffff;
  --text: #1d1d1b;
  --rubrik: #1d1d1b;
  --dampad: #6b6a65;
  --linje: #e2e0d8;
  --accent: #1f5f8b;
  --accent-bg: #e6f0f7;
  --domare: #1d1d1b;
  --saknas: #9a988f;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161615;
    --kort: #20201e;
    --text: #ecebe6;
    --rubrik: #ffffff;
    --dampad: #a3a29b;
    --linje: #34332f;
    --accent: #7fb6dd;
    --accent-bg: #1d2f3c;
    --domare: #ecebe6;
    --saknas: #77766f;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
/* hidden ska vinna över klasser som sätter display — annars syns tomma knappar. */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
main { max-width: 44rem; margin: 0 auto; padding: 2rem 1rem 4rem; }

.marke {
  margin: 0 0 0.4rem; font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
}
h1 { font-size: 2.1rem; line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
.ingress { color: var(--dampad); font-size: 1.05rem; margin: 0.5rem 0 1.75rem; }
/* Sidans topp sedan 2026-09-18: rosetten och en mening, inget namn och ingen
   rubrik. Meningen bär rubrikens roll och är därför stor och i textfärg. */
.topp { display: flex; align-items: center; gap: 0.85rem; margin: 0.25rem 0 28px; }
.topp-ikon { width: 52px; height: 52px; border-radius: 12px; flex: none; }
.topp .ingress { margin: 0; color: var(--text); font-size: 1.25rem; font-weight: 400; line-height: 1.3; letter-spacing: 0.03em; }
h2 { font-size: 1rem; margin: 0 0 0.5rem; }

.sok { position: relative; }
#sok {
  width: 100%;
  font: inherit;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linje);
  border-radius: 0.5rem;
  background: var(--kort);
  color: var(--text);
}
#sok:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#forslag {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10;
  list-style: none; margin: 0; padding: 0.25rem 0;
  background: var(--kort); border: 1px solid var(--linje); border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
  max-height: 18rem; overflow-y: auto;
}
#forslag li { padding: 0.5rem 0.9rem; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; }
#forslag li[aria-selected="true"], #forslag li:hover { background: var(--accent-bg); }
#forslag .grupp { color: var(--dampad); font-size: 0.85rem; white-space: nowrap; }

.valda { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.valda li {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: var(--accent-bg); color: var(--text);
  border-radius: 999px; padding: 0.2rem 0.3rem 0.2rem 0.8rem; font-size: 0.95rem;
}
.valda button {
  border: 0; background: transparent; color: var(--dampad); cursor: pointer;
  font-size: 1.1rem; line-height: 1; width: 1.6rem; height: 1.6rem; border-radius: 999px;
}
.valda button:hover { background: var(--linje); color: var(--text); }

/* Flikarna stannar kvar överst när listan rullas — annars är vägen till
   den andra vyn tjugo kort bort. */
.flikar {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 0.25rem;
  margin: 1rem -1rem 1rem; padding: 0.25rem 1rem 0;
  background: var(--bg); border-bottom: 1px solid var(--linje);
}
.flik {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 0.6rem 1rem; margin-bottom: -1px;
  background: transparent; color: var(--dampad);
  border: 0; border-bottom: 3px solid transparent;
}
.flik:hover { color: var(--text); }
.flik[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.flik:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 0.3rem; }
.forklaring { color: var(--dampad); font-size: 0.95rem; margin: 0 0 1rem; }
.vaxel { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 1rem; color: var(--dampad); font-size: 0.95rem; }
.fler {
  display: block; margin: 1rem auto 0; font: inherit; cursor: pointer;
  padding: 0.6rem 1.4rem; border-radius: 999px;
  border: 1px solid var(--linje); background: var(--kort); color: var(--text);
}
.fler:hover { border-color: var(--accent); }

.tomt { color: var(--dampad); padding: 2rem 0; text-align: center; }

.dag {
  background: var(--kort); border: 1px solid var(--linje); border-radius: 0.6rem;
  padding: 0.9rem 1rem; margin-bottom: 0.6rem;
}
.dag.ej-klar { background: transparent; }
.dag-huvud { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.datum { font-weight: 600; }
.typ { color: var(--dampad); font-size: 0.85rem; }
.namn { margin: 0.1rem 0 0; }
.plats { color: var(--dampad); font-size: 0.9rem; margin: 0; }

.domningar { list-style: none; padding: 0; margin: 0.7rem 0 0; border-top: 1px solid var(--linje); }
.domningar li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--linje); }
.domningar li:last-child { border-bottom: 0; }
.ras { color: var(--dampad); }
.gruppfinal .ras, .gruppfinal .domare { font-style: italic; }
.domare { color: var(--domare); font-weight: 600; text-align: right; }
.ej-publ { color: var(--saknas); font-weight: 400; font-size: 0.9rem; }
.kalla { font-size: 0.85rem; margin: 0.5rem 0 0; }
a { color: var(--accent); }

/* Foten ligger alltid kvar nederst — annars ser ingen vem som gjort sidan. */
.fot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.55rem max(1rem, calc((100% - 42rem) / 2));
  background: var(--kort); border-top: 1px solid var(--linje);
  color: var(--dampad); font-size: 0.85rem;
}
body { padding-bottom: 3.5rem; }

.notis { margin-top: 1rem; }
.notis .fler { margin: 0; }
.notis .forklaring { margin: 0.5rem 0 0; font-size: 0.85rem; }

.intro { margin-top: 2rem; }
.formaner { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.formaner li {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: var(--kort); border: 1px solid var(--linje); border-radius: 0.6rem;
  padding: 0.9rem 1rem;
}
.formaner .ikon {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 0.5rem;
  display: grid; place-items: center; font-size: 1.25rem; background: var(--accent-bg);
}
.formaner h3 { font-size: 1rem; margin: 0 0 0.15rem; font-weight: 400; color: var(--rubrik); letter-spacing: 0.03em; }
.formaner p { margin: 0; color: var(--dampad); font-size: 0.95rem; }
.borja { text-align: center; color: var(--dampad); margin: 1.5rem 0 0; }

/* ── Kommande: utställningar med domare som kort, utan domare som rader ── */
.kallor { margin: 0 0 0.75rem; color: var(--dampad); font-size: 0.95rem; }
.kallor summary { cursor: pointer; color: var(--accent); width: fit-content; }
.kallor p { margin: 0.5rem 0 0; }

.dag.klar { border-left: 4px solid var(--accent); }
.dag.klar .datum { color: var(--accent); }
.dag.klar .namn { font-size: 1.1rem; font-weight: 600; }
/* Kommande-korten ser ut som historikens (Ragnar 2026-09-18: "De här korten ser
   finare ut. Kortare. ... gör Kommande-korten likadana"): rasen till vänster,
   domaren till höger på samma rad. Den staplade uppställningen är borta. */
.gruppfinal .ras, .gruppfinal .domare { font-style: normal; }
/* Samma storlek som rasens domare (Ragnar 2026-09-18: "Karen McDevitt står i två olika
   teckenstorlekar"). Det är raden ovanför som säger att det är gruppfinalen. */

.rad {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: 0.75rem;
  padding: 0.7rem 0.25rem; border-bottom: 1px solid var(--linje);
}
.rad .nar { margin: 0; color: var(--dampad); font-size: 0.85rem; line-height: 1.3; }
.rad .nar b { display: block; color: var(--text); font-size: 1.05rem; }
.rad .namn { margin: 0; font-weight: 500; }
.rad .plats { font-size: 0.85rem; }
.rad .vantar { color: var(--saknas); font-size: 0.85rem; margin: 0.1rem 0 0; }
.dag.klar + .rad, .lista-start + .rad { border-top: 0; }
.dag + .rad { margin-top: -0.2rem; }
.rad + .dag { margin-top: 0.8rem; }

.arrangor {
  display: flex; margin: 0 0 0.75rem; padding: 3px; gap: 3px;
  background: var(--linje); border-radius: 0.6rem;
}
.arrangor label { flex: 1 1 auto; position: relative; }
.arrangor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.arrangor span {
  display: flex; align-items: center; justify-content: center; text-align: center; height: 100%;
  padding: 0.45rem 0.5rem; border-radius: 0.45rem; font-size: 0.9rem; line-height: 1.2; color: var(--dampad);
}
.arrangor input:checked + span { background: var(--kort); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.arrangor input:focus-visible + span { outline: 2px solid var(--accent); }

/* ── Med valda raser: kortare huvud, notisen på en rad ── */
.har-raser main { padding-top: 1.25rem; }
.har-raser .ingress { display: none; }
/* Ragnar 2026-09-18: logon bort när en ras är vald — listan ska ha platsen. */
.har-raser .topp { display: none; }
.har-raser h1 { font-size: 1.6rem; margin-bottom: 1rem; }
.har-raser .intro { display: none; }

.notis:not(.pa) .fler { font-size: 0.95rem; padding: 0.5rem 1rem; }
.notis.pa { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.notis.pa .forklaring { order: -1; margin: 0; font-size: 0.9rem; }
.notis.pa .fler {
  border: 0; background: none; padding: 0; color: var(--accent);
  font-size: 0.9rem; text-decoration: underline; white-space: nowrap;
}
.kallor { margin: 1.5rem 0 0; }
.vaxel { font-size: 0.9rem; }

/* Rubriken syns inte — sökrutan förklarar sig själv — men skärmläsaren behöver den. */
.dold-rubrik {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Karta ── */
#karta { height: 62vh; min-height: 320px; border-radius: 0.6rem; border: 1px solid var(--linje); z-index: 0; }
.karta-not { margin: 0.6rem 0 0; font-size: 0.85rem; }
.karta-not:empty { display: none; }
.kartruta { font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1d1d1b; }
.leaflet-popup-content .kartruta p { margin: 0; }
.leaflet-popup-content .kartruta .kartort { font-weight: 700; font-size: 1rem; margin-bottom: 0.3rem; }
.kartdag { padding: 0.4rem 0; border-top: 1px solid #e2e0d8; }
.kartdag .datum { color: #1f5f8b; font-weight: 600; }
.kartdag ul { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.kartdag .ras { color: #6b6a65; }
.kartruta .ej-publ { color: #9a988f; }

/* ── Avstånd ── */
.avstand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0 0 0.6rem; font-size: 0.95rem; }
.avstand select {
  font: inherit; color: var(--text); background: var(--kort);
  border: 1px solid var(--linje); border-radius: 0.45rem; padding: 0.35rem 0.5rem;
}
#fran-text { color: var(--dampad); }
.lank { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
.fran-ruta { background: var(--kort); border: 1px solid var(--linje); border-radius: 0.6rem; padding: 0.8rem; margin: 0 0 0.6rem; }
.fran-ruta .fler { margin: 0; }
.fran-form { display: flex; gap: 0.5rem; margin: 0.6rem 0; }
.fran-form input {
  flex: 1; min-width: 0; font: inherit; padding: 0.5rem 0.7rem;
  border: 1px solid var(--linje); border-radius: 0.5rem; background: var(--bg); color: var(--text);
}
.fran-ruta .forklaring { margin: 0; font-size: 0.85rem; }
.besked { margin: 0 0 0.6rem; font-size: 0.9rem; }
.besked:empty { display: none; }
.mil { color: var(--accent); white-space: nowrap; }
.kartruta .mil { color: #1f5f8b; }

.dela-ikon { width: 0.95em; height: 1.1em; vertical-align: -0.2em; color: var(--accent); margin: 0 0.1em; }

.fot-meny { position: relative; }
#fot-namn {
  font: inherit; color: var(--dampad); background: none; border: 0; padding: 0.3rem 0; cursor: pointer;
}
#fot-namn b { color: var(--accent); font-weight: 600; }
#fot-namn span { font-size: 0.7rem; color: var(--accent); }
.fot-val {
  position: absolute; left: -0.5rem; bottom: calc(100% + 0.6rem);
  display: flex; flex-direction: column; min-width: 15rem;
  background: var(--kort); border: 1px solid var(--linje); border-radius: 0.7rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.15); padding: 0.3rem;
}
.fot-val a, .fot-val .fot-dela-rad {
  color: var(--text); text-decoration: none; font-size: 1rem; padding: 0.7rem 0.8rem; border-radius: 0.5rem;
}
.fot-val a:hover, .fot-val .fot-dela-rad:hover { background: var(--accent-bg); }
#uppdaterad { white-space: nowrap; font-size: 0.75rem; display: block; margin-top: -0.2rem; }
#fot-namn { padding: 0.15rem 0; }
.kaffe-knapp {
  flex: none; white-space: nowrap; text-decoration: none;
  font-weight: 700; font-size: 0.95rem; color: #1d1d1b;
  background: #ffdd00; border-radius: 999px; padding: 0.55rem 1rem;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.18);
}
.kaffe-knapp:hover { background: #ffe433; }

.sidlank { margin: 0.15rem 0 0; font-size: 0.85rem; }

.rad.installd .namn, .rad.installd .plats { color: var(--saknas); }
.installd-text { margin: 0.1rem 0 0; font-size: 0.85rem; font-weight: 600; color: #b3261e; }

/* ── Filterknappen ────────────────────────────────────────────────────────
   Ett filter i stället för tre rader ovanför listan. Med land, arrangör och
   avstånd fick de inte plats på en mobil, och första skärmen är det enda de
   flesta ser. Knappen bär en siffra när något är valt. */
.filterrad { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.7rem; flex-wrap: wrap; }
#filter-knapp {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.8rem; border: 1px solid var(--linje); border-radius: 999px;
  background: var(--kort); color: var(--text); font: inherit; font-size: 0.95rem; cursor: pointer;
}
#filter-knapp:hover { border-color: var(--accent); }
#filter-knapp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.filter-antal {
  min-width: 1.35em; padding: 0 0.3em; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 700; text-align: center;
}
.filter-text { color: var(--dampad); font-size: 0.9rem; }
.filter-panel {
  border: 1px solid var(--linje); border-radius: 12px; background: var(--kort);
  padding: 0.3rem 0.9rem 0.9rem; margin: 0 0 0.8rem;
}
.filter-panel fieldset { border: 0; margin: 0; padding: 0.6rem 0 0; }
.filter-panel legend { padding: 0; font-size: 0.85rem; font-weight: 600; color: var(--dampad); }
.filter-panel .arrangor, .filter-panel .avstand { margin: 0.4rem 0 0; }
.kryss { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0.45rem 0 0; }
.kryss label { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.kryss input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }

/* Balans på första skärmen (Ragnar 2026-09-18): lika långt från logon till
   sökrutan som från sökrutan till rutorna, 28 px. Introns egen marginal var
   32 px och gav 44 px tillsammans med listan över valda raser. */
#valj-forst { margin-top: 16px; }

/* ── Toppen när en ras är vald (Ragnar 2026-09-18) ─────────────────────────
   "Man kommer inte välja raser mer än en eller två gånger. Sen är sökrutan
   bara i vägen." Sökrutan göms bakom ett plus bland rasbrickorna, och flikar,
   domarval och notiser har flyttat in i filterpanelen. Två smala rader, sedan
   listan. */
.har-raser .sok { display: none; }
.har-raser.sok-oppen .sok { display: block; margin-bottom: 0.5rem; }
.har-raser .valda { margin: 0 0 0.6rem; }
.valda .lagg-till {
  background: transparent; border: 1px dashed var(--linje); color: var(--dampad);
  width: auto; height: auto; padding: 0.2rem 0.75rem; font-size: 0.95rem; border-radius: 999px;
}
.valda .lagg-till:hover { color: var(--text); border-color: var(--accent); background: transparent; }
.valda li.plus { background: transparent; padding: 0; }

.filter-panel .vaxel { margin: 0.4rem 0 0; }
.filter-panel .notis { margin: 0.4rem 0 0; }
.filter-panel .notis .forklaring { margin: 0.4rem 0 0; }
.filter-panel .fran-ruta { margin-top: 0.6rem; }
.filter-panel fieldset { padding-top: 0; margin-top: 1.1rem; }
.filter-panel fieldset:first-child { margin-top: 0.7rem; }
.filter-panel legend { margin-bottom: 0.1rem; }

/* Domarens land i mindre stil: namnet är det viktiga, landet en upplysning. */
.domare .land { font-size: 0.78em; font-weight: 400; color: var(--dampad); }

/* Kartans teckenförklaring: ritade prickar, samma som på kartan (Ragnar
   2026-09-18: "Istället för Fylld prick ritar vi en fylld prick!"). */
.teckenforklaring { list-style: none; padding: 0; margin: 0.6rem 0 0.3rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; color: var(--dampad); font-size: 0.95rem; }
.teckenforklaring li { display: inline-flex; align-items: center; gap: 0.45rem; }
.prick { width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 2px solid #1f5f8b; flex: none; }
.prick.fylld { background: #1f5f8b; }
.prick.tom { background: #ffffff; border-color: #8a8880; }

/* Panelens väg ut: en stor knapp längst ner, som på mobilen brukar vara. */
.filter-klar {
  display: block; width: 100%; margin: 1.3rem 0 0.2rem; padding: 0.8rem 1rem;
  border: 0; border-radius: 10px; background: var(--accent); color: var(--bg);
  font: inherit; font-weight: 600; cursor: pointer;
}
.filter-klar:hover { filter: brightness(1.08); }
.filter-klar:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* Pilen på Filter vänder sig när panelen är öppen — knappen ser tryckbar ut. */
#filter-knapp .pil { font-size: 0.8em; margin-left: 0.1rem; transition: transform 0.15s; color: var(--dampad); }
#filter-knapp[aria-expanded="true"] .pil { transform: rotate(180deg); }

/* Dela-knappen i foten: bara ikonen, rund, mellan namnet och kaffeknappen. */
.dela-knapp-ur-bruk {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; margin-left: auto; margin-right: -0.4rem;
  border: 1px solid var(--linje); border-radius: 999px; background: transparent;
  color: var(--text); cursor: pointer;
}
.dela-knapp:hover { border-color: var(--accent); }
.dela-knapp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fot-dela-rad { font: inherit; font-size: inherit; text-align: left; border: 0; background: transparent; cursor: pointer; width: 100%; }
.fot-dela-rad:hover { background: var(--accent-bg); }
.dela-kvitto {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 4.5rem; z-index: 30;
  margin: 0; padding: 0.6rem 0.9rem; border-radius: 10px; max-width: calc(100% - 2rem);
  background: var(--text); color: var(--bg); font-size: 0.9rem; box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
}

/* Med dela-knappen i foten behöver namnet raden för sig: tätare mellanrum. */
.fot { gap: 0.6rem; }
#fot-namn { white-space: nowrap; }
/* På en smal telefon (375 px) måste namn, dela och kaffe rymmas på en rad:
   det fattades 35 px. Lite mindre överallt i stället för att ta bort något. */
@media (max-width: 420px) {
  .fot { padding-left: 12px; padding-right: 12px; gap: 0.5rem; }
  #fot-namn { font-size: 0.8rem; }
  .dela-knapp-ur-bruk { width: 2.15rem; height: 2.15rem; margin-right: -0.2rem; }
  .kaffe-knapp { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
}

/* ── Tarzan i foten ──────────────────────────────────────────────────────
   Hela bottenlisten utom kaffet är en knapp. I den spelar Tarzans espresso-scen
   (tarzan/) en gång när sidan öppnas och somnar sedan. Scenen är 226 × 100 px
   och förankrad i fotens nederkant: den övre halvan sticker upp över listan
   (överenskommet), foten själv är lika låg som förut. Scenen tar inga klick
   (pointer-events: none i tarzan.css) — trycket går till knappen eller listan. */
.fot-meny { flex: 1; min-width: 0; align-self: stretch; display: flex; }
.fot-knapp { flex: 1; display: flex; align-items: flex-end; padding: 0 !important; min-height: 3.2rem; overflow: visible; }
.scen { position: relative; display: block; width: 100%; height: 3.2rem; }
/* Kaffeknappen ligger över scenen där de möts på en smal telefon. */
.kaffe-knapp { position: relative; z-index: 1; }
/* Listans sista rad ska gå att rulla fram ovanför scenens topp. */
body { padding-bottom: calc(3.5rem + 50px); }
.fot-om { margin: 0.3rem 0 0; padding: 0.6rem 0.8rem 0.4rem; border-top: 1px solid var(--linje); color: var(--dampad); font-size: 0.85rem; line-height: 1.45; }

/* Flaggan före arrangörens namn. Exakt 15 × 10 px (samma rutnät som ritningen,
   så att kanterna blir knivskarpa) och ingen rundning. */
.flagga { display: inline-block; width: 15px; height: 10px; margin-right: 6px; vertical-align: 0;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15); }
.flagga svg { display: block; width: 15px; height: 10px; }

/* Flaggorna som snabbval före Filter-knappen. 30 × 20 px (rutnätet × 2, knivskarpt)
   i en tryckyta på 44 px. Valt land fullt med ring, de andra bleka. */
.flaggval { display: inline-flex; gap: 0.15rem; }
.flaggknapp {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 10px; background: none; cursor: pointer;
}
.flaggknapp svg { display: block; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.18); opacity: 0.35; filter: saturate(0.4); transition: opacity 0.15s; }
.flaggknapp[aria-pressed="true"] svg { opacity: 1; filter: none; outline: 2px solid var(--accent); outline-offset: 2px; }
.flaggknapp:hover svg { opacity: 0.8; }
.flaggknapp:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

/* Stegen för hemskärmen, inne i fotmenyn. */
.fot-hjalp { margin: 0 0.3rem 0.3rem; padding: 0.6rem 0.8rem; border-radius: 0.5rem;
  background: var(--accent-bg); color: var(--text); font-size: 0.9rem; line-height: 1.45; }

/* ── Utfällbara kort (Ragnar 2026-09-20: "minska varje ruta och göra den
   klickbar för mer information") ─────────────────────────────────────────
   Kortet visar datum, ort och raderna ras -> domare. Ett tryck fäller ut typ,
   arrangör, sista anmälningsdag, avstånd och länkarna. */
.utfallbar { cursor: pointer; position: relative; }
.utfallbar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mer-pil { margin-left: auto; color: var(--dampad); font-size: 0.8rem; display: inline-block; transition: transform 0.15s; }
.utfallbar.oppen .mer-pil { transform: rotate(180deg); }
.mer { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--linje);
  display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; }
.mer-rad { display: flex; gap: 0.6rem; justify-content: space-between; }
.mer-etikett { color: var(--dampad); }
.mer-lank { width: fit-content; }
.mer-notering { margin: 0; color: var(--dampad); }
.rad .dag-huvud { display: block; }
.rad .mer-pil { position: absolute; right: 0.3rem; top: 0.75rem; }

/* Frågan om notiser, överst i listan. Ingen text att läsa — en fråga och två knappar. */
.notis-fraga {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap;
  margin: 0 0 0.7rem; padding: 0.7rem 0.9rem;
  background: var(--accent-bg); border: 1px solid var(--accent); border-radius: 0.6rem;
}
.notis-fraga p { margin: 0; font-weight: 600; }
.notis-fraga-knappar { display: flex; gap: 0.5rem; margin-left: auto; }
.notis-ja, .notis-nej { font: inherit; font-size: 0.95rem; padding: 0.4rem 0.9rem; border-radius: 999px; cursor: pointer; }
.notis-ja { border: 0; background: var(--accent); color: #fff; font-weight: 600; }
.notis-nej { border: 1px solid var(--linje); background: transparent; color: var(--dampad); }

.notis-fraga-hjalp { flex-basis: 100%; margin: 0.2rem 0 0; font-size: 0.9rem; line-height: 1.45; color: var(--text); }

/* Stegen för hemskärmen: ikonen till vänster, texten till höger. */
.steg { margin: 0.3rem 0 0; padding: 0 0 0 0.2rem; list-style: none; counter-reset: steg; display: grid; gap: 0.7rem; }
.steg li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.1rem 0.7rem; align-items: center; }
.steg li::before { counter-increment: steg; content: counter(steg) "."; grid-column: 1; grid-row: 1; color: var(--dampad); font-weight: 700; }
.steg .steg-ruta { grid-column: 1; grid-row: 2; display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 1px solid var(--linje); border-radius: 0.5rem; background: var(--kort); }
.steg li > span:not(.steg-ruta):not(.steg-under) { grid-column: 2; grid-row: 1; font-weight: 600; }
.steg .steg-under { grid-column: 2; grid-row: 2; color: var(--dampad); font-size: 0.85rem; line-height: 1.4; }
.steg-ikon { width: 1.1rem; height: 1.3rem; display: block; }