/*
 * SwedRally.se — formgivning
 * ==========================
 *
 * Utgångspunkten är §16: sidan ska kännas som RALLY, FART, SVERIGE, MODERNT,
 * ENKELT — men regelverk ska samtidigt vara "mycket rena och lättlästa".
 * Det är två krav som drar åt olika håll, och hela systemet bygger på att
 * lösa dem med två ytor i stället för en kompromiss:
 *
 *   VÄGEN   mörk marinblå. Hero, kalenderband, sidfot. Fart och riktning.
 *   NOTERNA varmt papper. Nyheter, regler, dokument. Läsning och lugn.
 *
 * Färgerna är hämtade ur SwedRallys egen logotyp — marinblått #00275F och
 * guld #FBCB13, alltså svenska flaggans färger — inte ur den gamla sidans
 * svart/gult, som är en begränsning från FrontPage-tiden.
 *
 * Signaturen är TIDKORTET: nästa tävling presenteras som ett rallytidkort med
 * stämplad status, inte som en banner. Det är sportens eget dokument.
 */

/* --------------------------------------------------------------------- *
 * Typsnitt. Självhostade — inga anrop till tredje part från besökarens
 * webbläsare. Båda är licensierade under SIL Open Font License 1.1.
 * --------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../font/archivo-latin.de2f1fe81758.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../font/archivo-latin-ext.589f7bc0fac4.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif";
  src: url("../font/serif-latin.e9192c2fe0a3.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif";
  src: url("../font/serif-latin-ext.33ba75072ebc.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------- */

:root {
  /* Vägen */
  --natt: #001636;
  --navy: #00275f;
  --navy-ljus: #0a3b7f;
  /* Accenten. Används som markör — aldrig som dekoration. */
  --guld: #fbcb13;
  --guld-mork: #c99c00;
  /* Noterna */
  --papper: #f7f5f0;
  --papper-mork: #ebe7de;
  --black: #101826;
  --grau: #5c6779;
  /* Enda signalfärgen: röd flagg. */
  --rod: #c8102e;

  --ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brod: "Source Serif", Georgia, "Times New Roman", serif;

  --spalt: min(1200px, 100% - 2.5rem);
  --radie: 2px;
  --skugga: 0 1px 2px rgb(0 22 54 / 0.08), 0 8px 24px -12px rgb(0 22 54 / 0.25);
  --overgang: 160ms cubic-bezier(0.2, 0, 0.1, 1);
}

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

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

body {
  margin: 0;
  background: var(--papper);
  color: var(--black);
  font-family: var(--ui);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* Fokusringen är dubbel med flit. Guldet ensamt är 11,7:1 mot natten men
   1,4:1 mot papperet — alltså osynligt på precis de ytor där det mesta av
   läsningen sker. Den mörka ytterkanten bär ringen mot papper och vitt,
   guldet bär den mot navy och natt. En ring som håller mot båda bottnarna
   är bättre än två som ska hållas i synk. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--guld);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--natt);
  border-radius: var(--radie);
}

.hoppa-till {
  position: absolute;
  left: -9999px;
  background: var(--guld);
  color: var(--natt);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  z-index: 100;
}
.hoppa-till:focus { left: 1rem; top: 1rem; }

.spalt { width: var(--spalt); margin-inline: auto; }

/* Etiketter i kondenserad Archivo. Systemets genomgående "datastil":
   används för allt som är en uppgift snarare än en mening. */
.etikett {
  font-family: var(--ui);
  font-stretch: 78%;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
}

/* =====================================================================
 * Sidhuvud
 * ===================================================================== */

.sidhuvud {
  background: var(--natt);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}

.sidhuvud__inre {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  /* Följer logotypen: 54 px + luft över och under. Sätts den fast lägre
     klipps inte loggan — sidhuvudet växer ändå — men den hamnar kant i kant
     med kanten, och det ser ut som ett fel snarare än som en stor logotyp. */
  min-height: 80px;
}

.logotyp { display: flex; align-items: center; flex: 0 0 auto; padding: 0.5rem 0; }
/* Förstorad 2026-09-03 (var 40 px). Skalar i stället för att vara fast:
   logotypen är 1000×370, alltså 2,7 gånger bredare än hög, och på 54 px tar
   den 146 px av bredden. Det ryms bra på en skärm men trängs med menyknappen
   och kontonamnet på en telefon i 360 px, så den kliver ner mot 46 px där —
   fortfarande större än den var. */
.logotyp img { height: clamp(46px, 5.5vw, 54px); width: auto; }

.huvudmeny { margin-left: auto; }

.huvudmeny > ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.huvudmeny a {
  display: block;
  padding: 0.7rem 0.85rem;
  font-stretch: 88%;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(255 255 255 / 0.82);
  border-bottom: 3px solid transparent;
  transition: color var(--overgang), border-color var(--overgang);
}
.huvudmeny a:hover { color: #fff; border-bottom-color: var(--guld-mork); }
.huvudmeny a[aria-current] { color: #fff; border-bottom-color: var(--guld); }

.huvudmeny li { position: relative; }

.undermeny {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--navy);
  border: 1px solid rgb(255 255 255 / 0.14);
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  display: none;
  box-shadow: 0 16px 32px -16px rgb(0 0 0 / 0.6);
}
.huvudmeny li:hover > .undermeny,
.huvudmeny li:focus-within > .undermeny { display: block; }

.undermeny a {
  border-bottom: 0;
  padding: 0.5rem 1rem;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.925rem;
  font-stretch: 100%;
  font-weight: 500;
}
.undermeny a:hover { background: rgb(255 255 255 / 0.08); }

.menyknapp {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid rgb(255 255 255 / 0.3);
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  border-radius: var(--radie);
}

/* =====================================================================
 * Hero med tidkortet — sidans signatur
 * ===================================================================== */

.hero {
  position: relative;
  background: var(--natt);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hero__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }

/* Sliten asfalt snarare än en jämn gradient: två lager som möts snett,
   så att kortet alltid ligger mot en mörk yta oavsett bildens motiv. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(104deg, rgb(0 22 54 / 0.96) 0 44%, rgb(0 22 54 / 0.72) 72%, rgb(0 22 54 / 0.55) 100%),
    linear-gradient(0deg, rgb(0 22 54 / 0.85), rgb(0 22 54 / 0.1));
}

.hero__inre {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__inre { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 3.5rem; }
}
/* Nyheterna högre upp i mobil (Daniel 2026-09-18): under 62 rem visas
   tidkortet efter nyheterna i stället för i heron, och heron blir kortare —
   ingressen ryms i ett stycke, bara en knapp. Datorn är oförändrad. */
.hero__kort--dator { display: none; }
.bara-mobil { display: block; }
@media (min-width: 62rem) {
  .hero__kort--dator { display: block; }
  .bara-mobil { display: none; }
}
@media (max-width: 62rem) {
  .hero__inre { padding-block: 2rem; gap: 0; }
  .hero__knappar .knapp--kontur { display: none; }
  .bara-mobil .tidkort { transform: none; max-width: 30rem; }
}

.hero__ord h1 {
  font-family: var(--ui);
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(2.4rem, 1.2rem + 5.4vw, 5rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0.5rem 0 0;
  text-wrap: balance;
}
.hero__ord h1 em {
  font-style: normal;
  color: var(--guld);
  display: block;
}

.hero__ingress {
  font-family: var(--brod);
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.5;
  color: rgb(255 255 255 / 0.86);
  max-width: 34ch;
  margin: 1.25rem 0 0;
}

.hero .etikett { color: var(--guld); }

.hero__knappar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* --- Tidkortet ------------------------------------------------------- */

.tidkort {
  position: relative;
  background: var(--papper);
  color: var(--black);
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.75);
  /* Nästan omärkligt lutad, som ett papper någon lagt ifrån sig. */
  transform: rotate(-0.5deg);
  border-radius: var(--radie);
}

.tidkort__kant {
  height: 8px;
  background: var(--guld);
}

.tidkort__inre { padding: 1.5rem 1.5rem 1.25rem; }

.tidkort__nummer {
  font-stretch: 70%;
  font-weight: 800;
  font-size: 3.25rem;
  line-height: 0.85;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.tidkort h2 {
  font-stretch: 105%;
  font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0.35rem 0 0;
  text-wrap: balance;
}

/* Uppgiftsrader med hårfina linjer — tidkortets rutnät. */
.tidkort__rader {
  margin: 1.1rem 0 0;
  border-top: 1px solid var(--papper-mork);
}
.tidkort__rad {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--papper-mork);
}
.tidkort__rad dt {
  font-stretch: 78%;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0;
}
.tidkort__rad dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.tidkort__knappar { display: grid; gap: 0.5rem; margin-top: 1.15rem; }
@media (min-width: 26rem) {
  .tidkort__knappar { grid-template-columns: 1fr 1fr; }
  .tidkort__knappar > :first-child { grid-column: 1 / -1; }
}

/* --- Stämpeln -------------------------------------------------------- */

/* Stämpeln är i grunden ett vanligt inline-element så att den kan stå i en
   rubrik eller en kalenderrad. Bara på tidkortet lyfts den ut och klistras
   snett över hörnet — utan den begränsningen letar den upp närmaste
   positionerade förälder och hamnar i sidans hörn. */
.stampel {
  display: inline-block;
  transform: rotate(-8deg);
  font-stretch: 82%;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  color: var(--navy);
  background: var(--papper);
  border: 2.5px solid currentColor;
  border-radius: 3px;
  /* Dubbel ram = gummistämpel, inte etikett. */
  box-shadow: inset 0 0 0 1.5px var(--papper), inset 0 0 0 3px currentColor;
}
.tidkort .stampel {
  position: absolute;
  top: -0.9rem;
  right: -0.5rem;
  z-index: 1;
}

/* Stämpeln hänger med flit utanför kortet, men den är dessutom roterad — och
   en roterad ruta är bredare än elementet. Nära skärmkanten blev den därför
   ett skäl till att sidan rullade i sidled. Den flyttas in på smala skärmar;
   lutningen syns ändå. */
@media (max-width: 34rem) {
  .tidkort .stampel { right: 0.25rem; }
}

/* Mörkare guld än --guld-mork: #c99c00 mot papper är 2,55:1 (axe serious,
   testprotokollet 2026-09-07). #7a5f00 ger 6,3:1 och läses fortfarande som
   guld tack vare ramen och lutningen. */
.stampel--oppen { color: #7a5f00; }
.stampel--stangd,
.stampel--klar { color: var(--grau); }
.stampel--installd { color: var(--rod); }

/* =====================================================================
 * Knappar
 * ===================================================================== */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  font-family: var(--ui);
  font-stretch: 92%;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radie);
  cursor: pointer;
  transition: background var(--overgang), color var(--overgang), border-color var(--overgang), transform var(--overgang);
}
.knapp:hover { transform: translateY(-1px); }
.knapp:active { transform: translateY(0); }

.knapp--guld { background: var(--guld); color: var(--natt); }
.knapp--guld:hover { background: #ffd83a; }

.knapp--navy { background: var(--navy); color: #fff; }
.knapp--navy:hover { background: var(--navy-ljus); }

.knapp--kontur { border-color: currentColor; color: inherit; }
.knapp--kontur:hover { background: rgb(255 255 255 / 0.1); }

.knapp--papper { border-color: var(--papper-mork); background: #fff; color: var(--black); }
.knapp--papper:hover { border-color: var(--navy); }

.knapp[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* =====================================================================
 * Sektioner
 * ===================================================================== */

.avsnitt { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.avsnitt--papper { background: var(--papper); }
.avsnitt--vit { background: #fff; }
.avsnitt--navy { background: var(--navy); color: #fff; }
.avsnitt--natt { background: var(--natt); color: #fff; }

.avsnitt__huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.avsnitt__huvud h2 {
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
}

.avsnitt--navy .avsnitt__huvud h2,
.avsnitt--natt .avsnitt__huvud h2 { color: #fff; }
.avsnitt--navy .etikett,
.avsnitt--natt .etikett { color: var(--guld); }

.mer-lank {
  font-stretch: 88%;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--guld);
  padding-bottom: 2px;
  white-space: nowrap;
}
.mer-lank:hover { border-bottom-width: 3px; }

/* =====================================================================
 * Snabblänkar (§3)
 * ===================================================================== */

/* Sex ingångar i ett rutnät som går jämnt ut: 3 × 2 på stora skärmar,
   2 × 3 på surfplatta, 1 × 6 i mobil. auto-fit ger fem kolumner på 1200 px
   och lämnar en tom ruta kvar. */
.snabblankar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--papper-mork);
  border: 1px solid var(--papper-mork);
}
@media (min-width: 34rem) { .snabblankar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .snabblankar { grid-template-columns: repeat(3, 1fr); } }

.snabblank {
  background: #fff;
  padding: 1.5rem 1.35rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  position: relative;
  transition: background var(--overgang);
}
.snabblank::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--guld);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--overgang);
}
.snabblank:hover { background: var(--papper); }
.snabblank:hover::before { transform: scaleY(1); }

.snabblank strong {
  font-stretch: 105%;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.snabblank span { color: var(--grau); font-size: 0.9rem; }

/* =====================================================================
 * Nyheter
 * ===================================================================== */

/* auto-fit, inte auto-fill: med en eller två nyheter ska korten fylla raden
   i stället för att lämna tomma spår till höger — sedan nyheterna ligger
   högst upp på startsidan är det första besökaren ser (2026-09-18). */
.nyhetsrutnat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1.75rem;
}
/* En enda nyhet: liggande kort med bilden till vänster. */
@media (min-width: 40rem) {
  .nyhetsrutnat--en .nyhetskort { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .nyhetsrutnat--en .nyhetskort__bild { aspect-ratio: auto; min-height: 15rem; }
  .nyhetsrutnat--en .nyhetskort__text { padding: 1.5rem 1.75rem; justify-content: center; }
  .nyhetsrutnat--en .nyhetskort h3 { font-size: 1.5rem; }
}

.nyhetskort {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-radius: var(--radie);
  overflow: hidden;
  transition: border-color var(--overgang), transform var(--overgang), box-shadow var(--overgang);
}
.nyhetskort:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: var(--skugga);
}

.nyhetskort__bild { aspect-ratio: 3 / 2; background: var(--papper-mork); }
.nyhetskort__bild img { width: 100%; height: 100%; object-fit: cover; }

.nyhetskort__text { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }

.nyhetskort h3 {
  margin: 0;
  font-stretch: 100%;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
}
.nyhetskort h3 a { text-decoration: none; }
.nyhetskort h3 a::after { content: ""; position: absolute; inset: 0; }
.nyhetskort { position: relative; }

.nyhetskort p {
  margin: 0;
  font-family: var(--brod);
  color: var(--grau);
  font-size: 0.975rem;
  line-height: 1.5;
}

.datum {
  font-stretch: 78%;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--guld-mork);
}

/* =====================================================================
 * Tävlingskalender
 * ===================================================================== */

.kalender { display: grid; gap: 1px; background: rgb(255 255 255 / 0.15); border-block: 1px solid rgb(255 255 255 / 0.15); }
.avsnitt--papper .kalender,
.avsnitt--vit .kalender { background: var(--papper-mork); border-color: var(--papper-mork); }

.kalenderrad {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.25rem;
  background: var(--navy);
  text-decoration: none;
  position: relative;
  transition: background var(--overgang);
}
.avsnitt--papper .kalenderrad,
.avsnitt--vit .kalenderrad { background: #fff; }

.kalenderrad:hover { background: var(--navy-ljus); }
.avsnitt--papper .kalenderrad:hover,
.avsnitt--vit .kalenderrad:hover { background: var(--papper); }

/* Datumblocket — kalenderns läsankare, samma plats på varje rad.
   Guldet ligger som yta och inte som text: brickan står på navyraden på
   startsidan och på den vita raden i kalendern, och guld på vitt är 1,5:1.
   Vänd — mörk text på guld — blir det 11,7:1 på båda raderna, med en enda
   stil att hålla reda på. */
.datumblock {
  text-align: center;
  min-width: 4.25rem;
  padding: 0.4rem 0.5rem;
  border: 2px solid var(--guld);
  background: var(--guld);
  color: var(--natt);
  border-radius: var(--radie);
  line-height: 1;
}
.datumblock b {
  display: block;
  font-stretch: 74%;
  font-weight: 800;
  font-size: 1.75rem;
}
.datumblock span {
  display: block;
  font-stretch: 78%;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 0.2rem;
  opacity: 0.85;
}

.kalenderrad__namn {
  display: block;
  font-stretch: 105%;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  line-height: 1.15;
}
.kalenderrad__plats { display: block; font-size: 0.9rem; opacity: 0.75; margin-top: 0.15rem; }

/* I kalenderraden står stämpeln rakt — en lista med tio lutande etiketter
   blir orolig att läsa. */
.kalenderrad .stampel {
  transform: none;
  box-shadow: none;
  border-width: 2px;
  background: transparent;
  font-size: 0.68rem;
  padding: 0.3rem 0.55rem;
  white-space: nowrap;
}
.avsnitt--navy .kalenderrad .stampel,
.avsnitt--natt .kalenderrad .stampel { color: var(--guld); }
.avsnitt--navy .kalenderrad .stampel--stangd,
.avsnitt--natt .kalenderrad .stampel--stangd,
.avsnitt--navy .kalenderrad .stampel--klar,
.avsnitt--natt .kalenderrad .stampel--klar { color: rgb(255 255 255 / 0.55); }
.avsnitt--navy .kalenderrad .stampel--installd,
.avsnitt--natt .kalenderrad .stampel--installd { color: #ff7b8a; }

/* På smal skärm får stämpeln inte längre konkurrera med tävlingsnamnet om
   bredden. Tre kolumner vid 390px lämnade 74px till namnet och 128px till
   stämpeln — namnet är radens innehåll, statusen är dess fotnot. Stämpeln
   flyttar ned under namnet och raden blir två kolumner. */
@media (max-width: 30rem) {
  .kalenderrad {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem 1rem;
  }
  .kalenderrad .stampel {
    grid-column: 2;
    justify-self: start;
  }
}

/* =====================================================================
 * Läsytor: artiklar, sidor och regelverk
 * ===================================================================== */

.artikelsidhuvud { background: var(--natt); color: #fff; padding-block: clamp(2rem, 5vw, 3.25rem); }
.artikelsidhuvud h1 {
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.25rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: 0.5rem 0 0;
  text-wrap: balance;
}
.artikelsidhuvud .etikett { color: var(--guld); }
.artikelsidhuvud p { color: rgb(255 255 255 / 0.82); font-family: var(--brod); font-size: 1.1rem; max-width: 62ch; margin: 0.85rem 0 0; }

.artikel { width: min(72ch, 100% - 2.5rem); margin-inline: auto; padding-block: clamp(2rem, 5vw, 3.5rem); }
.artikel--bred { width: var(--spalt); }

/* Brödtexten är satt i serif. Regelverk och långa texter läses ofta i
   mobil ute på en tävling, och en serif med tydlig gråskala är lugnare
   att följa rad för rad än den kondenserade ui-skriften. */
.brodtext { font-family: var(--brod); font-size: 1.09rem; line-height: 1.68; }
.brodtext > * + * { margin-top: 1.15em; }
.brodtext h2 {
  font-family: var(--ui);
  font-stretch: 105%;
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-top: 2em;
  line-height: 1.15;
}
.brodtext h3 {
  font-family: var(--ui);
  font-stretch: 100%;
  font-weight: 700;
  font-size: 1.2rem;
  margin-top: 1.75em;
}
/* Märket på designförslagen (alt1–alt4) — säger vilket tema man ser och
   länkar mellan förslagen. Renderas aldrig på huvudsajten. */
.temamarke {
  position: fixed;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 99;
  background: #101826;
  color: #fff;
  font-family: var(--ui);
  font-size: 0.78rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  box-shadow: 0 6px 20px -6px rgb(0 0 0 / 0.5);
  display: flex;
  gap: 0.55rem;
  align-items: center;
}
.temamarke a { color: #fbcb13; text-decoration: none; font-weight: 700; }
.temamarke a:hover { text-decoration: underline; }

.brodtext a { color: var(--navy); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.brodtext a:hover { color: var(--guld-mork); }
/* Knappar i brödtext är knappar, inte länkar. Länkfärgen ovan väger tyngre
   än knappvarianten (0-1-1 mot 0-1-0) och gjorde navy-knappens text navy på
   navy — en helt tom rektangel — och guldknappens hovertext guldbrun. */
.brodtext a.knapp--navy, .brodtext a.knapp--navy:hover { color: #fff; }
.brodtext a.knapp--guld, .brodtext a.knapp--guld:hover { color: var(--natt); }
.brodtext ul, .brodtext ol { padding-left: 1.35em; }
.brodtext li + li { margin-top: 0.4em; }
.brodtext blockquote {
  margin-left: 0;
  padding-left: 1.15rem;
  border-left: 4px solid var(--guld);
  font-style: italic;
  color: var(--grau);
}
.brodtext img { border-radius: var(--radie); margin-block: 1.5em; }

.toppbild { margin-bottom: 2rem; border-radius: var(--radie); overflow: hidden; }
.bildtext { font-size: 0.82rem; color: var(--grau); margin-top: 0.5rem; }

/* =====================================================================
 * Dokumentlistan (§6) — medvetet avskalad
 * ===================================================================== */

.kategorimeny { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.kategorimeny a {
  font-stretch: 88%;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--papper-mork);
  border-radius: var(--radie);
  background: #fff;
  transition: border-color var(--overgang), background var(--overgang);
}
.kategorimeny a:hover { border-color: var(--navy); }
.kategorimeny a[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; }

.dokumentgrupp + .dokumentgrupp { margin-top: 2.75rem; }
.dokumentgrupp h2 {
  font-stretch: 105%;
  font-weight: 800;
  font-size: 1.35rem;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--guld);
}

/* min-width så att kolumnerna inte klämmer ihop sig till oläslighet — den
   rullande behållaren tar hand om att sidan ändå inte rullar i sidled. */
.dokumenttabell { width: 100%; min-width: 24rem; border-collapse: collapse; font-size: 0.95rem; }
.dokumenttabell th {
  text-align: left;
  font-stretch: 78%;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grau);
  padding: 0 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--papper-mork);
  white-space: nowrap;
}
.dokumenttabell td { padding: 0.7rem 0.75rem 0.7rem 0; border-bottom: 1px solid var(--papper-mork); vertical-align: baseline; }
.dokumenttabell tr:hover td { background: #fff; }
.dokumenttabell a { font-weight: 700; text-decoration: none; color: var(--navy); border-bottom: 2px solid var(--guld); }
.dokumenttabell a:hover { color: var(--guld-mork); }
.dokumenttabell .liten { color: var(--grau); font-size: 0.85rem; }
.dokumenttabell .nummer { font-stretch: 78%; font-weight: 700; color: var(--grau); letter-spacing: 0.06em; }

/* =====================================================================
 * Tävlingssidan
 * ===================================================================== */

.tavlingsrutnat { display: grid; gap: 2.5rem; }
/* Grid-barn får min-width: auto som förval, alltså "minst så brett som
   innehållet". Dokumenttabellens min-width (24rem) sprängde därför hela
   spalten på en 360 px-skärm i stället för att rulla inuti sin egen
   .tabellrullning — sajten fick sidledsscroll på tävlingssidan.
   Nollan låter rullningsrutan göra sitt jobb. */
.tavlingsrutnat > * { min-width: 0; }
@media (min-width: 60rem) {
  .tavlingsrutnat { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}

.faktaruta {
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-top: 5px solid var(--guld);
  border-radius: var(--radie);
  padding: 1.35rem;
}
.faktaruta h2 {
  font-stretch: 100%;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.85rem;
}
.faktaruta dl { margin: 0; }
.faktaruta .tidkort__rad:last-child { border-bottom: 0; }
.faktaruta .knapp { width: 100%; margin-top: 0.6rem; }
.faktaruta__lankar { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.75rem 0 0; font-size: 0.9rem; }

.lanklista { list-style: none; margin: 0; padding: 0; }
.lanklista li + li { border-top: 1px solid var(--papper-mork); }
.lanklista a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  text-decoration: none;
  font-weight: 600;
}
.lanklista a::after { content: "→"; color: var(--guld-mork); font-weight: 700; }
.lanklista a:hover { color: var(--navy); }
.lanklista .saknas { padding: 0.75rem 0; color: var(--grau); display: flex; justify-content: space-between; }
.lanklista .saknas::after { content: "–"; }

/* =====================================================================
 * Annonser och partners (§19) — integrerade, aldrig i vägen (§22)
 * ===================================================================== */

.annons { margin-block: 2rem; text-align: center; }
.annons a { display: inline-block; text-decoration: none; max-width: 100%; }
/* Taket hindrar att en felaktigt beskuren banner tar över halva sidan.
   §22: annonser får aldrig göra det svårare att hitta det man kom för. */
.annons img { margin-inline: auto; border-radius: var(--radie); max-height: 16rem; width: auto; object-fit: contain; }
.annons__markering {
  display: block;
  font-stretch: 78%;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 0.4rem;
}
.annons--mobil { display: none; }
@media (max-width: 40rem) {
  .annons--dator { display: none; }
  .annons--mobil { display: block; }
}

.presenteras {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-left: 5px solid var(--guld);
  border-radius: var(--radie);
  margin-bottom: 2rem;
}
.presenteras img { max-height: 48px; width: auto; }

.partnerrutnat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
  gap: 1.5rem;
  align-items: center;
}
.partnerlogga {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 1rem;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-radius: var(--radie);
  text-decoration: none;
  text-align: center;
  transition: border-color var(--overgang);
}
.partnerlogga:hover { border-color: var(--navy); }
.partnerlogga img { max-height: 60px; width: auto; object-fit: contain; }
.partnerlogga small { color: var(--grau); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; font-stretch: 82%; }

.erbjudandekort {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

/* =====================================================================
 * Sidfot
 * ===================================================================== */

.sidfot { background: var(--natt); color: rgb(255 255 255 / 0.75); padding-block: 3rem 2rem; margin-top: auto; }
.sidfot a { color: #fff; text-decoration: none; }
.sidfot a:hover { color: var(--guld); }

.sidfot__partners { border-bottom: 1px solid rgb(255 255 255 / 0.12); padding-bottom: 2rem; margin-bottom: 2rem; }
.sidfot__partners .partnerlogga { background: rgb(255 255 255 / 0.95); border-color: transparent; }

.sidfot__rutnat {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.sidfot h2 {
  font-stretch: 82%;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--guld);
  margin: 0 0 0.85rem;
}
.sidfot ul { list-style: none; margin: 0; padding: 0; }
.sidfot li + li { margin-top: 0.4rem; }

.sidfot__botten {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.85rem;
}

/* =====================================================================
 * Övrigt
 * ===================================================================== */

.tomt {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--grau);
  border: 2px dashed var(--papper-mork);
  border-radius: var(--radie);
  font-family: var(--brod);
}

.sidbladdring { display: flex; gap: 0.5rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.sidbladdring a, .sidbladdring span {
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--papper-mork);
  border-radius: var(--radie);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  background: #fff;
}
.sidbladdring a:hover { border-color: var(--navy); }
.sidbladdring [aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Central smulrad under sidhuvudet — mörk så den smälter ihop med
   artikelsidhuvudet som följer. */
.brodsmulor {
  background: var(--natt);
  color: #9fb0c8;
  font-size: 0.82rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
.brodsmulor a { color: #cfdaeb; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / 0.25); }
.brodsmulor a:hover { color: #fff; border-bottom-color: var(--guld); }
.brodsmulor [aria-current] { color: #fff; }
.brodsmulor span[aria-hidden] { margin-inline: 0.35rem; color: #5c6779; }

.smulor { font-size: 0.82rem; color: var(--grau); padding-block: 1rem; }
.smulor a { text-decoration: none; border-bottom: 1px solid var(--papper-mork); }
.smulor a:hover { border-bottom-color: var(--guld); }

.varning {
  background: #fff;
  border-left: 5px solid var(--rod);
  padding: 1rem 1.25rem;
  border-radius: var(--radie);
  margin-bottom: 1.5rem;
}

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* =====================================================================
 * Rörelse — en enda koreograferad sekvens vid sidladdning
 * ===================================================================== */

@keyframes stig {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes stampla {
  from { opacity: 0; transform: rotate(-8deg) scale(1.35); }
  to { opacity: 1; transform: rotate(-8deg) scale(1); }
}

.hero__ord > * { animation: stig 550ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.hero__ord > :nth-child(1) { animation-delay: 60ms; }
.hero__ord > :nth-child(2) { animation-delay: 130ms; }
.hero__ord > :nth-child(3) { animation-delay: 200ms; }
.hero__ord > :nth-child(4) { animation-delay: 270ms; }
.tidkort { animation: stig 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms backwards; }
.tidkort .stampel { animation: stampla 380ms cubic-bezier(0.3, 1.4, 0.5, 1) 700ms backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .knapp:hover, .nyhetskort:hover { transform: none; }
}

/* =====================================================================
 * Mobil
 * ===================================================================== */

/* --- Regelassistenten (/fraga/) ------------------------------------- */

.assistent { margin-block: 0 2rem; }

.assistent__etikett {
  display: block;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 0.5rem;
}

.assistent__rad { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.assistent__falt {
  flex: 1 1 20rem;
  font-family: var(--ui);
  font-size: 1.02rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--papper-mork);
  border-radius: var(--radie);
  background: #fff;
  color: var(--black);
}
.assistent__falt:focus-visible { outline: 0; border-color: var(--navy); }

.assistent__exempel { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }

.assistent__forslag {
  font-family: var(--ui);
  font-size: 0.86rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--papper-mork);
  border-radius: 999px;
  background: #fff;
  color: var(--grau);
  cursor: pointer;
  transition: border-color var(--overgang), color var(--overgang);
}
.assistent__forslag:hover { border-color: var(--navy); color: var(--navy); }

.assistent__svar {
  border-left: 3px solid var(--guld);
  background: #fff;
  padding: 1.25rem 1.4rem;
  box-shadow: var(--skugga);
  border-radius: var(--radie);
}

.assistent__rubrik {
  font-family: var(--ui);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 0.6rem;
}

/* Svaret kommer som ren text ur modellen och skrivs in med textContent —
   aldrig som HTML. Radbrytningarna måste därför bäras av stilmallen. */
.assistent__text {
  font-family: var(--brod);
  font-size: 1.09rem;
  line-height: 1.68;
  white-space: pre-wrap;
}

.assistent__text[data-vantar]::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 1em;
  vertical-align: text-bottom;
  background: var(--guld);
  animation: assistent-blink 1s steps(2, start) infinite;
}

@keyframes assistent-blink { to { visibility: hidden; } }

.assistent__kallor { margin-top: 1.4rem; border-top: 1px solid var(--papper-mork); padding-top: 1rem; }
.assistent__kallor h3 {
  font-family: var(--ui);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 0.55rem;
}
.assistent__kallor ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.assistent__kallor a { font-family: var(--ui); font-weight: 600; color: var(--navy); }
.assistent__kallor a:hover { color: var(--guld-mork); }

.assistent__version,
.assistent__sida {
  font-family: var(--ui);
  font-size: 0.8rem;
  color: var(--grau);
  margin-left: 0.5rem;
}

.assistent__villkor {
  margin-top: 2rem;
  padding: 1.1rem 1.3rem;
  background: var(--papper-mork);
  border-radius: var(--radie);
}
.assistent__villkor h2 {
  font-family: var(--ui);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 0.6rem;
}
.assistent__villkor ul { margin: 0; padding-left: 1.15em; }
.assistent__villkor li { font-size: 0.94rem; line-height: 1.55; }
.assistent__villkor li + li { margin-top: 0.4em; }

.assistent__avstangd { font-family: var(--brod); font-size: 1.09rem; }

/* --- Anmälningssidan ------------------------------------------------- */

.anmalan__lage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  padding: 0.9rem 1.2rem;
  border-radius: var(--radie);
  border-left: 3px solid var(--grau);
  background: #fff;
  box-shadow: var(--skugga);
  margin-bottom: 1.75rem;
}
.anmalan__lage--oppen { border-left-color: var(--guld); }

.anmalan__status {
  margin: 0;
  font-family: var(--ui);
  font-weight: 800;
  font-stretch: 104%;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
}
.anmalan__antal { margin: 0; font-family: var(--ui); color: var(--grau); }

.anmalan__notis {
  border-left: 3px solid var(--guld);
  background: var(--papper-mork);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radie);
}
.anmalan__notis p { margin: 0; }

.anmalan__ingress { font-family: var(--ui); color: var(--grau); font-size: 0.95rem; }

.anmalan__klass + .anmalan__klass { margin-top: 1.5rem; }
.anmalan__klass h3 {
  font-family: var(--ui);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 0.55rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--papper-mork);
}

.anmalan__deltagare { list-style: none; padding: 0; margin: 0; }
.anmalan__deltagare li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--papper-mork);
}
.anmalan__namn { font-family: var(--ui); font-weight: 600; }
.anmalan__klubb { font-family: var(--ui); font-size: 0.9rem; color: var(--grau); }
.anmalan__vantar {
  font-family: var(--ui);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--guld-mork);
}

/* --- Anmälningsformuläret --------------------------------------------- */

.anmform fieldset {
  border: 0;
  border-top: 1px solid var(--papper-mork);
  padding: 1.25rem 0 0;
  margin: 0 0 1.75rem;
  /* Webbläsaren ger <fieldset> min-inline-size: min-content, och det är inte
     en vanlig min-width — den går inte att komma åt med width eller
     max-width. Följden är att ett fieldset vägrar krympa under sitt
     innehålls minsta bredd, och rutnätet innanför fick då rum att lägga två
     240 px-spalter på en 390 px-skärm: 498 px innehåll i en 390 px vy, och
     hela sidan drog i sidled (uppmätt 2026-09-03). Nollan släpper loss det.
     Måste stå här och inte på .steg — problemet följer med elementet, inte
     med vår stegning. */
  min-width: 0;
}
.anmform legend {
  font-family: var(--ui);
  font-weight: 800;
  font-stretch: 104%;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  color: var(--navy);
  padding-right: 0.8rem;
}

.anmform__rad { margin-bottom: 0.9rem; max-width: 30rem; }

/* Ingressen i ett steg (2026-09-03).
   Den stod tidigare i `anmform__hjalp` — 0,83 rem grått — och blev en vägg
   av liten text ovanför fälten, fast det är stegets viktigaste mening.
   Hjälptexten under ett enskilt fält får förbli liten; det här är något
   annat och ska se ut som något annat. */
.steg__ingress {
  margin: 0 0 0.7rem;
  font-family: var(--ui);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--black);
  max-width: 58ch;
}
.steg__ingress:last-of-type { margin-bottom: 1.5rem; }
.steg__ingress a { color: var(--navy); }

/* Rutnät för formulär med många korta fält (2026-09-03).
   En enda smal kolumn med tio fält under varandra läser sig som ett
   pappersformulär, och det var precis så kontosteget såg ut. `auto-fit` gör
   omslaget till en kolumn på smal skärm utan mediefråga, och `minmax` ser
   till att ett fält aldrig kläms ihop till oanvändbar bredd. */
.faltrutnat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 1.1rem;
  max-width: 44rem;
}
/* Inuti rutnätet är cellen bredden — takregeln ovan skulle annars göra
   varje fält 30 rem oavsett hur mycket plats kolumnen har. */
.faltrutnat .anmform__rad { max-width: none; }
/* Adress och mejladress går över hela bredden: adressen är lång, och
   mejlfältets hjälptext hör ihop med fältet och ska inte tvingas bryta i
   en halv kolumn. */
.anmform__rad--bred { grid-column: 1 / -1; max-width: 30rem; }
.anmform__rad label {
  display: block;
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 0.25rem;
}
.anmform .falt {
  width: 100%;
  font-family: var(--ui);
  font-size: 1rem;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--papper-mork);
  border-radius: var(--radie);
  background: #fff;
  color: var(--black);
}
.anmform .falt:focus-visible { outline: 0; border-color: var(--navy); }
.anmform input[type="checkbox"].falt { width: auto; }

.anmform__rad--fel .falt { border-color: var(--rod); }
.anmform__feltext {
  margin: 0.3rem 0 0;
  font-family: var(--ui);
  font-size: 0.85rem;
  color: var(--rod);
}
.anmform__hjalp {
  margin: 0.3rem 0 0;
  font-family: var(--ui);
  font-size: 0.83rem;
  color: var(--grau);
  max-width: 46ch;
}
.anmform__fel {
  border-left: 3px solid var(--rod);
  background: #fff;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radie);
  margin-bottom: 1.5rem;
}
.anmform__integritet {
  background: var(--papper-mork);
  border-radius: var(--radie);
  padding: 0.9rem 1.1rem;
  font-family: var(--ui);
  font-size: 0.88rem;
  max-width: 46rem;
}

/* --- Förarens egna uppgifter i anmälan -------------------------------- */
/* Uppgifterna ägs av Nitroz och visas bara för kontroll. Rutan är därför
   läsbar men avsiktligt lugn — den ska inte se ut som fält att fylla i. */
.minauppg {
  margin: 0.9rem 0 0;
  padding: 0.9rem 1.1rem;
  background: var(--papper-mork);
  border-radius: var(--radie);
  max-width: 46rem;
  font-family: var(--ui);
  font-size: 0.9rem;
}
/* Låsta fält ska se lästa ut, inte trasiga. Django sätter `disabled` på
   förarens egna uppgifter — de går inte att ändra här, bara hos Nitroz. */
.minauppg input[disabled] {
  background: #fff;
  border-style: dashed;
  color: var(--navy, #1a2b45);
  cursor: not-allowed;
  opacity: 1; /* Safari bleker annars disabled-fält till oläslighet. */
}
.minauppg__rad {
  display: flex;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.minauppg__rad:last-child { border-bottom: 0; }
.minauppg__rad dt {
  flex: 0 0 7.5rem;
  color: var(--grau);
}
.minauppg__rad dd {
  margin: 0;
  font-weight: 600;
}
.minauppg__licenser {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
  font-weight: 400;
  font-size: 0.85rem;
}
.minauppg__saknas {
  max-width: 46rem;
  margin-top: 0.8rem;
}

@media (max-width: 34rem) {
  .minauppg__rad { flex-direction: column; gap: 0.15rem; }
  .minauppg__rad dt { flex: none; }
}

/* --- Besked till besökaren -------------------------------------------- */
.besked { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.besked__post {
  font-family: var(--ui);
  font-size: 0.92rem;
  padding: 0.7rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radie);
  border-left: 4px solid var(--grau);
  background: var(--papper-mork);
}
.besked__post--success { border-left-color: var(--gron, #2e7d32); }
.besked__post--error { border-left-color: var(--rod, #a02020); }
.besked__post--warning { border-left-color: var(--guld, #b8860b); }

/* --- Text som aldrig får rulla sidan ---------------------------------- */
/* En rubrik som består av ett långt ord — "Samarbetspartners" — får inte
   plats i 350 px och kan inte brytas vid mellanslag. Då rullade hela sidan i
   sidled. Avstavning löser det snyggt på svenska (sidan är lang="sv"), och
   break-word finns som sista utväg för ord som inte går att avstava.
   Gäller även långa adresser och e-postadresser i brödtext. */
h1, h2, h3, h4,
.brodtext p,
.brodtext li {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* --- Tabeller i brödtext ---------------------------------------------- */
/* Behållaren rullar, inte sidan. En bred tabell ska aldrig tvinga hela
   dokumentet att rulla i sidled — det är det som gör tabeller trasiga på
   mobil, och det syns först när någon faktiskt provar. */
.tabellrullning {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.2rem 0;
  max-width: 100%;
}
/* Behållaren är fokuserbar (tabindex="0") så att tangentbordet kan rulla
   den. Fokusringen kommer från den gemensamma [tabindex]-regeln högst upp
   (guld + mörk ytterkant, håller mot papper) — ingen egen regel här, en
   sådan tog bort ytterkanten. */
.brodtext table {
  border-collapse: collapse;
  width: 100%;
  min-width: 26rem;
  font-family: var(--ui);
  font-size: 0.92rem;
}
.brodtext th,
.brodtext td {
  text-align: left;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: top;
}
.brodtext th {
  font-weight: 700;
  border-bottom-width: 2px;
  white-space: nowrap;
}
.brodtext tbody tr:last-child td { border-bottom: 0; }

/* --- Fordon på min sida ----------------------------------------------- */
.fordonslista { list-style: none; margin: 1rem 0; padding: 0; }
.fordonskort {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.8rem 1rem;
  margin-bottom: 0.7rem;
  background: var(--papper-mork);
  border-radius: var(--radie);
  font-family: var(--ui);
}
.fordonskort--inaktiv { opacity: 0.6; }
/* Kvittot på min sida: hopfällbart per betalning. */
.kvittodetalj { margin-top: 0.4rem; font-size: 0.9rem; }
.kvittodetalj summary { cursor: pointer; color: var(--navy); font-weight: 600; }
.kvittorader { border-collapse: collapse; margin: 0.5rem 0; min-width: 260px; }
.kvittorader td { padding: 0.25rem 0; border-bottom: 1px solid var(--papper-mork); }
.kvittorader td:last-child { text-align: right; padding-left: 2rem; font-variant-numeric: tabular-nums; }
.kvittorader__summa td { font-weight: 700; border-bottom: 0; }
.kvittorader__harledd td { color: var(--grau); font-style: italic; }

/* Kvittot som eget dokument (/min-sida/kvitto/<order>/).

   Formen följer Nitroz fakturor, som är förlagan: ram runt hela handlingen,
   centrerad rubrik, logotyp till vänster och mottagare till höger, prickade
   metadatarader, inramad specifikation och en boxad summa. Det är den formen
   en klubbkassör känner igen som ett underlag — och samma form som PDF:en,
   så att skärmen och filen visar samma handling. */
.kvitto {
  max-width: 46rem;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #555;
  padding: 2.2rem 2.4rem 1.8rem;
  font-family: var(--ui);
  color: #000;
}
.kvitto__tillbaka,
.kvitto__knappar { max-width: 46rem; margin-inline: auto; font-family: var(--ui); }
.kvitto__tillbaka { margin-bottom: 1rem; }
.kvitto__knappar { margin-top: 1.4rem; }

.kvitto__ord {
  margin: 0 0 1.6rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
}

.kvitto__topp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}
/* Ordbilden är 150 px bred — bredare än så blir den synligt mjuk. */
.kvitto__logotyp { width: 9rem; height: auto; flex: 0 0 auto; }
.kvitto__mottagare { flex: 1 1 14rem; }
.kvitto__mottagare p { margin: 0; font-weight: 700; font-size: 1.05rem; }
.kvitto__till { font-size: 0.8rem !important; font-weight: 700; margin-bottom: 0.3rem !important; }

/* Prickade linjer under varje faktarad — förlagans mest karakteristiska
   detalj, och det som gör blocket läsbart som en uppgiftslista. */
.kvitto__fakta { margin: 2rem 0 0; margin-left: auto; max-width: 24rem; }
.kvitto__fakta > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0 0.3rem;
  border-bottom: 1px dotted #9a9a9a;
}
.kvitto__fakta dt { font-size: 0.9rem; }
.kvitto__fakta dd { margin: 0; font-weight: 600; text-align: right; }
.kvitto__nummer { font-weight: 800 !important; }

.kvitto__omfattning { margin: 2rem 0 0.8rem; font-size: 1.05rem; }

.kvitto__rader { width: 100%; border-collapse: collapse; }
.kvitto__rader th,
.kvitto__rader td { border: 1px solid #555; padding: 0.5rem 0.7rem; }
.kvitto__rader th { text-align: left; }
.kvitto__rader td:last-child {
  text-align: right;
  width: 10rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kvitto__rader--harledd td { color: #767676; }

/* Summan hänger under tabellen och delar dess högerkant, som i förlagan. */
.kvitto__summa {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 18rem;
  margin: -1px 0 0 auto;
  border: 1px solid #555;
  padding: 0.6rem 0.7rem;
  font-size: 1.05rem;
}
.kvitto__summa span { font-weight: 700; }
.kvitto__summa strong { font-size: 1.15rem; }

.kvitto__utstallare { margin-top: 2.4rem; font-size: 0.9rem; }
.kvitto__utstallare p { margin: 0 0 0.6rem; }
.kvitto__utstallare-rubrik { font-weight: 700; }
.kvitto__finstilt { color: #767676; font-size: 0.78rem; line-height: 1.5; }

.visuellt-dold {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .kvitto { padding: 1.4rem 1.2rem 1.2rem; }
  .kvitto__topp { flex-direction: column; gap: 1.2rem; }
  .kvitto__fakta { margin-left: 0; max-width: none; }
  .kvitto__summa { width: 100%; }
  .kvitto__rader td:last-child { width: auto; }
}

/* Utskrift: bara handlingen. PDF-knappen är den väg vi pekar ut, men den som
   ändå trycker Ctrl+P ska slippa meny, sidfot och knappar. */
@media print {
  .sidhuvud, .sidfot, .kvitto__tillbaka, .kvitto__knappar { display: none; }
  .kvitto { border: 0; padding: 0; max-width: none; }
}

.fordonsbild__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.82rem;
}
/* Filväljaren göms och nås via etiketten — webbläsarnas egen ser olika ut i
   var och en av de tre motorerna, och ingen av dem ser ut som sajten. */
.fordonsbild__valj {
  cursor: pointer;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--grau);
  border-radius: 999px;
  white-space: nowrap;
}
.fordonsbild__valj input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
/* Synlig fokusram när man tabbar dit — annars försvinner den med fältet. */
.fordonsbild__valj:focus-within {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
/* Kvittot på ett gjort val — filnamnet, eller vägledning vid tom submit. */
.fordonsbild__vald {
  color: var(--grau);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}
.fordonsbild__valj--vald { border-color: var(--navy); font-weight: 700; }
.fordonsbild__skicka {
  font-family: var(--ui);
  font-size: 0.82rem;
  padding: 0.25rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
}
.fordonskort__text { min-width: 0; }
.fordonskort__namn { margin: 0; font-weight: 700; }
.fordonsbild {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radie);
  flex: 0 0 auto;
  background: #fff;
}

@media (max-width: 34rem) {
  .fordonskort { flex-direction: column; align-items: flex-start; }
  .fordonsbild { width: 100%; height: auto; }
}

/* --- Min sida: förarprofilen ------------------------------------------ */
.minaprofil {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
  font-family: var(--ui);
}
.minaprofil__bild {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--papper-mork);
}
.minaprofil__namn { margin: 0; font-size: 1.15rem; font-weight: 700; }
.minaprofil__id { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--grau); }

/* --- Min sida: förarens anmälningar ----------------------------------- */
.minaanm { list-style: none; margin: 1rem 0 0; padding: 0; }
.minaanm__post {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.7rem;
  background: var(--papper-mork);
  border-radius: var(--radie);
  font-family: var(--ui);
}
.minaanm__detalj { font-size: 0.85rem; color: var(--grau); }
.minaanm__lage {
  font-size: 0.85rem;
  font-weight: 600;
  align-self: flex-start;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radie);
  border-left: 3px solid var(--grau);
  background: #fff;
}
.minaanm__lage--klar { border-left-color: var(--gron, #2e7d32); }
.minaanm__lage--vantar { border-left-color: var(--guld, #b8860b); }
.minaanm__lage--borta { border-left-color: var(--rod, #a02020); }
.minaanm__lank { font-size: 0.85rem; align-self: flex-start; }

/* Namnet i sidhuvudet är en länk till min sida — den ska se klickbar ut. */
a.nitrozkonto__namn { text-decoration: none; border-bottom: 1px dotted currentColor; }
a.nitrozkonto__namn:hover { border-bottom-style: solid; }

/* --- Kvittens efter anmälan ------------------------------------------ */
.kvitto {
  border-left: 3px solid var(--grau);
  padding: 0.8rem 1.1rem;
  border-radius: var(--radie);
  background: var(--papper-mork);
}
.kvitto--klar { border-left-color: var(--gron, #2e7d32); }
.kvitto--obetald { border-left-color: var(--guld, #b8860b); }
.kvitto--borta { border-left-color: var(--rod, #a02020); }
.kvitto__not,
.kvitto__licens {
  font-family: var(--ui);
  font-size: 0.88rem;
  color: var(--grau);
}
.kvitto__licens strong { color: inherit; }

/* --- Personligt anmälningsbesked ------------------------------------- */

.anmalningsratt {
  border-left: 3px solid var(--grau);
  background: #fff;
  box-shadow: var(--skugga);
  border-radius: var(--radie);
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
}
.anmalningsratt--ja { border-left-color: var(--guld); }
.anmalningsratt--nej { border-left-color: var(--rod); }

.anmalningsratt__besked {
  margin: 0;
  font-family: var(--ui);
  font-weight: 800;
  font-stretch: 104%;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
}
.anmalningsratt ul { margin: 0.6rem 0 0; padding-left: 1.2em; font-family: var(--brod); }
.anmalningsratt li + li { margin-top: 0.3em; }
.anmalningsratt__vem {
  margin: 0.7rem 0 0;
  font-family: var(--ui);
  font-size: 0.85rem;
  color: var(--grau);
}

/* --- Inloggning med Nitroz-konto -------------------------------------- */

.nitrozkonto { display: flex; align-items: center; gap: 0.6rem; }
.nitrozkonto form { margin: 0; }

.nitrozkonto__namn {
  font-family: var(--ui);
  font-size: 0.85rem;
  color: rgb(255 255 255 / 0.82);
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nitrozkonto__knapp {
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--overgang), background var(--overgang);
}
.nitrozkonto__knapp:hover { border-color: var(--guld); background: rgb(255 255 255 / 0.08); }
.nitrozkonto__knapp--in { border-color: var(--guld); color: var(--guld); }
/* Arrangörens ingång — guld som markering av en särskild roll. I sidhuvudet
   på desktop; på mobil, där raden är full vid 360 px, som en egen guldrand
   direkt under sidhuvudet (Daniel 2026-09-05: "arrangörs-knappen högst upp
   syns inte på mobil"). Samma brytpunkt som mobilmenyn. */
.nitrozkonto__knapp--arrangor { border-color: var(--guld); color: var(--guld); text-decoration: none; }
.nitrozkonto__knapp--arrangor:hover { background: rgb(251 203 19 / 0.12); }
.arrangorsrad { display: none; background: var(--guld); color: var(--navy); }
.arrangorsrad a {
  display: block;
  padding: 0.55rem 0;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.85rem;
  color: inherit;
  text-decoration: none;
}
@media (max-width: 80rem) {
  .nitrozkonto__knapp--arrangor { display: none; }
  .arrangorsrad { display: block; }
}

/* --- Arrangörens vy (2026-09-05) ------------------------------------------
   En arbetsvy, inte en läsartikel: verktygsrad, nyckeltal, tabell i full
   bredd och tävlingsfakta vid sidan. */
.arrangor__verktyg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin: 0 0 1.5rem;
}
.arrangor__lank { font-family: var(--ui); font-weight: 600; font-size: 0.9rem; }
.nyckeltal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.75rem;
}
@media (min-width: 40rem) { .nyckeltal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nyckeltal__ruta {
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-top: 5px solid var(--navy);
  border-radius: var(--radie);
  padding: 0.9rem 1rem 0.8rem;
}
.nyckeltal__ruta--klar { border-top-color: var(--gron, #2e7d32); }
.nyckeltal__ruta--vantar { border-top-color: var(--guld); }
.nyckeltal__ruta--borta { border-top-color: var(--grau); }
.nyckeltal__tal {
  margin: 0;
  font-stretch: 70%;
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--navy);
}
.nyckeltal__etikett {
  margin: 0.3rem 0 0;
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau);
}
.arrangor__rutnat { display: grid; gap: 1.5rem; }
.arrangor__rutnat > * { min-width: 0; }
@media (min-width: 60rem) {
  .arrangor__rutnat { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; }
}
.arrangor__huvud h2 { margin-top: 0; }
.arrangor .deltagartabell { min-width: 26rem; }
.arrangor .deltagartabell .minaanm__lage { white-space: nowrap; }

.artikel--smal { max-width: 34rem; }

.inlogg { display: grid; gap: 0.35rem; margin-bottom: 2rem; }
.inlogg label {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grau);
  margin-top: 0.6rem;
}
.inlogg input {
  font-family: var(--ui);
  font-size: 1.02rem;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--papper-mork);
  border-radius: var(--radie);
  background: #fff;
  color: var(--black);
}
.inlogg input:focus-visible { outline: 0; border-color: var(--navy); }
.inlogg button { margin-top: 1.1rem; justify-self: start; }

.inlogg__fel {
  border-left: 3px solid var(--rod);
  background: #fff;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radie);
  font-family: var(--ui);
  margin-bottom: 1.5rem;
}

.inlogg__skapa {
  border-top: 1px solid var(--papper-mork);
  padding-top: 1.5rem;
}
.inlogg__skapa h2 {
  font-family: var(--ui);
  font-size: 1.05rem;
  font-stretch: 104%;
  margin: 0 0 0.6rem;
}
.inlogg__skapa p { font-family: var(--brod); line-height: 1.6; }

@media (max-width: 56rem) {
  .nitrozkonto__knapp--in { font-size: 0.75rem; padding: 0.35rem 0.6rem; }
  /* Namnet är vägen till min sida — uppgifterna och anmälningarna. Tidigare
     doldes det här och bara "Logga ut" stod kvar: utloggningen syntes men
     vägen till det man loggat in för fanns inte. Nu tvärtom — namnet får
     plats (avkortat), och utloggningen bor på min sida där den redan finns. */
  .nitrozkonto__namn {
    display: inline-block;
    /* Taket följer skärmen och inte bara typsnittet. Med den större
       logotypen (2026-09-03) var raden exakt full vid 360 px inloggad —
       logotyp 124 px + menyknapp 70 px + kontoblock 128 px + två mellanrum
       = precis de 320 px som fanns — och ett långt namn sköt ut sidan i
       sidled. 26vw ger namnet 94 px vid 360 px och låter det växa tillbaka
       mot 8rem så snart det finns plats. */
    max-width: min(8rem, 26vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nitrozkonto form { display: none; }
}

/* Sidhuvudet fick hela sajten att rulla i sidled på mobil — 431 px i ett
   390 px fönster, på varenda sida och i alla tre motorer.
   Orsaken var `white-space: nowrap` på inloggningsknappen: "Logga in med ditt
   Nitroz-konto" går inte att korta, eftersom det ska framgå att kontot är
   Nitroz. Så knappen får brytas i stället. */
@media (max-width: 34rem) {
  .nitrozkonto__knapp--in {
    white-space: normal;
    max-width: 9.5rem;
    line-height: 1.15;
    text-align: center;
  }
  .sidhuvud__inre { gap: 0.75rem; }
}

/* Mobilmenyn tar över ända upp till 1280 px.
   Brytpunkten låg på 56rem (896 px), men skrivbordsmenyn rymdes inte förrän
   omkring 1100 — däremellan scrollade sidhuvudet i sidled: +181 px vid
   897, +127 vid 960, +66 vid 1024. Det felet fanns före den större
   logotypen (uppmätt +156 respektive +29 med den gamla) och var ett glapp
   ingen letat i: mätningar vid 360, 768 och 1280 hoppar rakt över det.
   Med den nya logotypen ryms menyn på en rad först vid 1271 px, uppmätt
   genom att söka efter brytpunkten och inte genom att gissa. 80rem ligger
   strax ovanför och täcker hela glappet.
   Priset är att en bärbar skärm på 1024–1280 px får hamburgaren i stället
   för menyraden. Det är ett medvetet val: en meny bakom en knapp är bättre
   än en meny som skjuter ut sidan. */
@media (max-width: 80rem) {
  .menyknapp { display: block; }
  .huvudmeny {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--natt);
    border-bottom: 3px solid var(--guld);
    padding: 0.5rem 0 1rem;
    /* Måttet är sidhuvudets höjd — menyn hänger under det och ska inte nå
       utanför skärmen. Följde inte med när sidhuvudet gick från 68 till
       80 px, och menyn blev då 12 px för hög i stället för rullningsbar. */
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .huvudmeny[data-oppen] { display: block; }
  .huvudmeny > ul { flex-direction: column; align-items: stretch; gap: 0; width: var(--spalt); margin-inline: auto; }
  .huvudmeny a { padding: 0.85rem 0; border-bottom: 1px solid rgb(255 255 255 / 0.1); }
  .huvudmeny a[aria-current] { border-bottom-color: var(--guld); }
  .undermeny { position: static; display: block; border: 0; box-shadow: none; background: transparent; padding: 0 0 0.5rem 1rem; }
  .undermeny a { border-bottom: 0; padding: 0.55rem 0; opacity: 0.8; }

  /* Mobilordningen (Lelle 2026-10-07): RallyFynd, Nyheter, Tävlingar först,
     resten i databasens ordning efter dem. (Nyheter låg först en halvtimme,
     men RallyFynd ska vara det man möts av — bytet gjordes efter att vi
     sett menyn i telefonen.) Gäller BARA mobilmenyn —
     datormenyn läser ordningen ur databasen (Menypost.ordning) och den
     ordningen är oförändrad. Därför flexboxens `order` och inte en ändring
     i databasen: koden kan inte ändra det ena utan det andra.
     Nycklarna är adresserna (se data-meny i templates/publik/bas.html). */
  .huvudmeny > ul > li { order: 4; }
  .huvudmeny > ul > li[data-meny="/market/"] { order: 1; }
  .huvudmeny > ul > li[data-meny="/nyheter/"] { order: 2; }
  .huvudmeny > ul > li[data-meny="/tavlingar/"] { order: 3; }

  /* RallyFynd ska hittas av den som inte surfar varje dag (Lelle
     2026-10-07): guldfylld knapp i stället för en vit rad bland sju andra.
     Gult på natt-blått klarar kontrastkravet — gult på vitt gör det inte
     (1,54:1), så texten är mörk och bakgrunden gul, aldrig omvänt. */
  .huvudmeny > ul > li[data-meny="/market/"] > a {
    margin: 0.55rem 0;
    padding: 0.85rem 0.85rem;
    background: var(--guld);
    color: var(--natt);
    font-weight: 800;
    text-align: center;
    border-bottom: 0;
    border-radius: var(--radie);
  }
  .huvudmeny > ul > li[data-meny="/market/"] > a[aria-current] {
    color: var(--natt);
    box-shadow: 0 0 0 2px #fff;
  }
  .huvudmeny > ul > li[data-meny="/market/"] > a:hover {
    color: var(--natt);
    background: var(--guld-mork);
  }
}

/* Ovanför brytpunkten finns plats för hela menyraden — då ska posterna inte
   brytas inuti sin andel av bredden. Utan den här raden gick fyra av sex
   ("Regler & dokument", "För tävlande", "För arrangörer", "Om SwedRally")
   över till två rader vid 1280 px när logotypen växte, och det var det som
   fick sidhuvudet att se ut som ett misstag — inte logotypen i sig. */
@media (min-width: 80.01rem) {
  .huvudmeny > ul > li > a { white-space: nowrap; }
}

@media print {
  .sidhuvud, .sidfot, .annons, .knapp, .kategorimeny { display: none !important; }
  body { background: #fff; color: #000; }
  .artikelsidhuvud { background: #fff; color: #000; padding-block: 0 1rem; }
  .artikelsidhuvud h1 { color: #000; }
}

/* Fält som fyllts från registret. Låsta men läsbara — samma resonemang som
   förarens egna uppgifter: de kommer någon annanstans ifrån, och att kunna
   skriva i dem utan att källan ändras vore missvisande. */
.anmform .falt--last {
  background: var(--papper-mork);
  border-style: dashed;
}

/* --- Uppslag av kartläsare -------------------------------------------- */
.kartlasarsok__knapp { margin: 0.3rem 0 0.6rem; font-size: 0.85rem; }
.kartlasarsok__svar {
  font-family: var(--ui);
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}
.kartlasarsok__namn { margin: 0; font-weight: 700; }
.kartlasarsok__licens {
  margin: 0.2rem 0 0;
  padding-left: 0.7rem;
  border-left: 3px solid var(--grau);
}
.kartlasarsok__licens--giltig { border-left-color: var(--gron, #2e7d32); }
.kartlasarsok__licens--saknas { border-left-color: var(--rod); }
.kartlasarsok__licens--okand { border-left-color: var(--guld, #b8860b); }
/* "Menade du …?" när Nitroz hittade personen redan — frågan och valen. */
.kartlasarsok__dubblett {
  margin-top: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--guld, #b8860b);
  background: var(--papper-mork);
}
.kartlasarsok__dubblett p { margin: 0 0 0.4rem; }
.kartlasarsok__val {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  margin: 0.3rem 0;
  padding: 0.5rem 0.8rem;
  background: var(--papper-mork);
  border: 1px solid var(--grau);
  border-radius: var(--radie);
  cursor: pointer;
}

/* --- Anmälan i steg --------------------------------------------------- */
/* Stegen växer fram. `--vaxer` sätts av skriptet, så utan JavaScript står
   allt öppet och formuläret ser ut som förut. */
.anmform--steg .steg {
  border: 0;
  border-top: 2px solid var(--papper-mork);
  margin: 0;
  padding: 1.4rem 0;
}
.anmform--steg .steg:first-of-type { border-top: 0; }
.anmform--steg legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ui);
  font-stretch: 96%;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 0;
}
.steg__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 0.85rem;
}
/* Vilande steg fälls ihop men går att öppna med ett klick — de är aldrig
   låsta. Att spärra ett steg vore att gissa vad någon vill göra härnäst. */
.anmform--vaxer .steg--vilande > *:not(legend) { display: none; }
.anmform--vaxer .steg--vilande { padding-bottom: 0.6rem; cursor: pointer; }
.anmform--vaxer .steg--vilande legend { opacity: 0.55; }

/* Navigering mellan stegen (2026-09-03).

   **Raden visas alltid, knapparna i den inte.** Fram och tillbaka gör
   ingenting utan JavaScript — då står alla steg öppna och man fyller i i ett
   svep — så de döljs tills skriptet satt `anmform--vaxer`. Men raden bär
   också submit-knappen, och göms hela raden går formuläret inte att skicka
   utan skript. Det var precis vad som hände i första versionen. */
.stegnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--papper-mork);
}
.stegnav__bak,
.stegnav__fram { display: none; }
.anmform--vaxer .stegnav__bak,
.anmform--vaxer .stegnav__fram { display: inline-block; }
/* Framåt till höger, bakåt till vänster — samma riktning som pilarna. */
.stegnav__fram,
.stegnav [type="submit"] { margin-left: auto; }

/* Vägvalet efter bilen: två jämnstora vägar, inte en knapp och en länk.
   Båda är riktiga val, och den som vill anmäla sig utan kartläsare ska inte
   behöva leta efter den vägen. */
.vagval {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.2rem 0 0.4rem;
}
/* Inuti stegformuläret är vägvalet två skriptknappar — utan skript står
   alla steg öppna och knapparna vore döda. Döljs tills skriptet satt
   `anmform--vaxer`, som navknapparna. Ingångens vägval (utanför formuläret)
   är vanliga länkar och berörs inte. */
.anmform--steg .vagval { display: none; }
.anmform--vaxer .vagval { display: flex; }
.vagval__knapp { flex: 1 1 14rem; text-align: center; }

/* Ingångsvalet: har du licens eller inte (2026-09-03).
   Inramat och med stegräknaren överst, för att det *är* steg 1 — inte en
   uppsättning knappar före formuläret. Det var otydligheten Daniel pekade
   på: sidan visade två vägar utan att säga att valet var första steget. */
.startval {
  border: 2px solid var(--navy);
  border-radius: var(--radie);
  background: var(--papper);
  padding: 1.3rem 1.4rem 1.1rem;
  font-family: var(--ui);
}
.startval__steg {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
}
.startval__fraga { margin: 0 0 0.6rem; font-size: 1.35rem; }
.startval__text { margin: 0; font-size: 0.95rem; line-height: 1.55; }
/* Mellanfallet — konto men ingen licens — står under valen och inte inuti
   ett av dem: det är en tredje situation, och att gömma den i knapptexten
   hade gjort båda knapparna längre och otydligare. */
.startval__mellanfall {
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--papper-mork);
}

.steg__sammanfattning { margin: 0 0 0.6rem; font-family: var(--ui); }
.steg__namn { margin: 0; font-weight: 700; }
.steg__licens {
  margin: 0.25rem 0 0;
  padding-left: 0.7rem;
  border-left: 3px solid var(--grau);
  font-family: var(--ui);
  font-size: 0.9rem;
}
.steg__licens--giltig { border-left-color: var(--gron, #2e7d32); }
.steg__licens--saknas { border-left-color: var(--rod); }
.steg__licens--okand { border-left-color: var(--guld, #b8860b); }
.steg__licensrad:empty { display: none; }
.steg__mer { margin: 0.6rem 0; }
.steg__mer summary {
  cursor: pointer;
  font-family: var(--ui);
  font-size: 0.9rem;
  color: var(--grau);
}

/* Steg-för-steg-hjälpen ovanför anmälningsformuläret.
   Utfällbar och inte modal: en guide man läser *medan* man fyller i ska gå
   att ha öppen bredvid fälten, och den fungerar utan JavaScript.

   Tydligt formgiven med flit. Den förra utfällningen på sidan var grå
   0,9-rem-text och hittades inte av någon — här säger ikonen, ramen och
   pilen tre gånger att det finns något att öppna. */
.guide {
  margin: 0 0 1.6rem;
  border: 2px solid var(--navy);
  border-radius: var(--radie);
  background: #fff;
}
.guide__knapp {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  font-family: var(--ui);
  list-style: none;
}
/* Webbläsarens egen triangel bort — vi ritar en egen som pekar åt rätt håll
   och ser likadan ut i alla motorer. */
.guide__knapp::-webkit-details-marker { display: none; }
.guide__knapp:hover { background: var(--papper); }
.guide__knapp:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }
.guide__ikon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
}
.guide__text { flex: 1 1 auto; font-weight: 700; line-height: 1.3; }
.guide__hjalp {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--grau);
  margin-top: 0.15rem;
}
.guide__pil {
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2.5px solid var(--navy);
  border-bottom: 2.5px solid var(--navy);
  transform: rotate(45deg);
}
.guide[open] .guide__pil { transform: rotate(-135deg); }
.guide__innehall {
  padding: 0.4rem 1rem 1rem;
  border-top: 1px solid var(--papper-mork);
  font-family: var(--ui);
}
.guide__lista { margin: 0.8rem 0 0; padding-left: 1.4rem; }
.guide__lista li { margin-bottom: 0.85rem; line-height: 1.55; }
.guide__fot { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--grau); }

/* Licensvalet för kartläsaren.
   Stod tidigare som en kryssruta med hjälptext under, mitt bland de andra
   fälten, och gick att missa. Det är ett beslut som kostar pengar och rör en
   annan person — det ska läsas som ett, inte som ännu ett fält. */
.beslutsruta {
  margin: 1.2rem 0;
  border: 2px solid var(--navy);
  border-radius: var(--radie);
  background: var(--papper);
  padding: 1rem 1.1rem 0.7rem;
}
.beslutsruta__rubrik {
  margin: 0 0 0.4rem;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 1.05rem;
}
.beslutsruta__text {
  margin: 0 0 0.9rem;
  font-family: var(--ui);
  font-size: 0.92rem;
  line-height: 1.5;
}
.beslutsruta .anmform__rad:last-child { margin-bottom: 0; }

/* Radioknappar i anmälan: etiketten bredvid knappen, inte under. */
.anmform ul[id$="delar_bil"],
.anmform div[id$="delar_bil"] {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  border: 0;
}
.anmform ul[id$="delar_bil"] label,
.anmform div[id$="delar_bil"] label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--ui);
  cursor: pointer;
}
.anmform input[type="radio"] { width: auto; margin: 0; }
.steg__land {
  margin: 0.15rem 0 0;
  font-family: var(--ui);
  font-size: 0.85rem;
  color: var(--grau);
}

/* Avanmälan: tillgänglig men inte inbjudande. Den ska gå att hitta av den som
   letar, inte råkas klickas av den som inte gör det. */
.kvitto__avanmal { margin: 1.5rem 0 0; }
.kvitto__avanmalknapp {
  font-family: var(--ui);
  font-size: 0.85rem;
  padding: 0.35rem 0.8rem;
  background: none;
  border: 1px solid var(--grau);
  border-radius: var(--radie);
  color: var(--grau);
  cursor: pointer;
}
.kvitto__avanmalknapp:hover { border-color: var(--rod); color: var(--rod); }

/* --- Arrangörens deltagarlista på Min sida (2026-09-04) ------------------
   Rullar i sin egen behållare (.tabellrullning) precis som dokumenttabellen,
   så sidan aldrig drar i sidled i telefon. */
.deltagartabell { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 0.95rem; }
.deltagartabell th {
  text-align: left; font-family: var(--ui); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau);
  padding: 0.4rem 0.75rem 0.4rem 0; border-bottom: 1px solid var(--papper-mork);
}
.deltagartabell td { padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid var(--papper-mork); vertical-align: baseline; }
.deltagartabell__klass th { padding-top: 1.1rem; color: var(--navy); font-size: 0.78rem; }
.deltagartabell__struken td { color: var(--grau); text-decoration: line-through; }
.deltagartabell__struken small { text-decoration: none; }

/* --- Väntläget: paus tills mejladressen är bekräftad (2026-09-04) ------
   Daniels ord: "lägg upp en paus-icon, vänta på bekräftelse, gör paus-icon
   grön, gå vidare". Ikonen ritas i CSS — två streck som blir en bock. */
.vantan[hidden] { display: none; }   /* klassregeln nedan får inte slå över hidden */
.vantan {
  display: flex; gap: 1rem; align-items: flex-start;
  margin: 1.2rem 0 0.4rem; padding: 1rem 1.1rem;
  border: 2px solid var(--guld); border-radius: var(--radie);
  background: var(--papper); font-family: var(--ui);
}
.vantan__ikon {
  flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--guld); position: relative;
}
.vantan__ikon::before, .vantan__ikon::after {
  content: ""; position: absolute; top: 0.7rem; width: 0.4rem; height: 1.2rem;
  background: var(--navy); border-radius: 2px;
}
.vantan__ikon::before { left: 0.8rem; }
.vantan__ikon::after { right: 0.8rem; }
@media (prefers-reduced-motion: no-preference) {
  .vantan:not(.vantan--klar) .vantan__ikon { animation: vantan-puls 1.6s ease-in-out infinite; }
  @keyframes vantan-puls { 50% { box-shadow: 0 0 0 6px rgba(245, 197, 24, 0.35); } }
}
.vantan__rubrik { display: block; font-size: 1rem; margin-bottom: 0.2rem; }
.vantan__text { margin: 0 0 0.6rem; font-size: 0.92rem; line-height: 1.5; max-width: 56ch; }
.vantan__status { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--grau); }
.vantan--klar { border-color: #1E7B4A; }
.vantan--klar .vantan__ikon { background: #1E7B4A; }
.vantan--klar .vantan__ikon::before {
  left: 0.75rem; top: 1.25rem; width: 0.5rem; height: 0.3rem; background: #fff;
  transform: rotate(45deg); border-radius: 0;
}
.vantan--klar .vantan__ikon::after {
  right: 0.7rem; top: 0.95rem; width: 0.3rem; height: 0.95rem; background: #fff;
  transform: rotate(45deg); border-radius: 0;
}
.vantan--klar .vantan__igen { display: none; }

/* Studsat välkomstmejl (2026-10-08): inte en väntan utan ett stopp — ingen
   länk finns att klicka på. Rutan ska inte pulsera som om något var på väg;
   ikonen blir ett utropstecken i rött och pulsen slås av. */
.vantan--studsat { border-color: #B3261E; }
/* Dubbel klass: pulsregeln ovan är `.vantan:not(.vantan--klar) .vantan__ikon`
   och väger lika tungt — den här måste väga minst lika mycket och stå efter. */
.vantan.vantan--studsat .vantan__ikon { background: #B3261E; animation: none; }
.vantan--studsat .vantan__ikon::before {
  left: 1.1rem; top: 0.55rem; width: 0.4rem; height: 1.1rem; background: #fff;
  border-radius: 2px;
}
.vantan--studsat .vantan__ikon::after {
  left: 1.1rem; right: auto; top: 1.85rem; width: 0.4rem; height: 0.4rem;
  background: #fff; border-radius: 50%;
}
.vantan--studsat .vantan__igen { display: none; }

/* Beskedet vid "Gå till kassa": vad anmälan väntar på, och en spärrad knapp
   tills både föraren och kartläsaren bekräftat (Daniel 2026-09-05). */
.kassavantan {
  margin: 0 0 0.8rem; padding: 0.7rem 0.9rem; font-size: 0.92rem;
  line-height: 1.5; border-radius: 6px; max-width: 60ch;
  background: #FBF3D6; border: 1px solid #E4C64B; color: #4a3d0e;
}
.kassavantan--klar { background: #E7F3EC; border-color: #1E7B4A; color: #1E5B38; }
.kassavantan:empty { display: none; }
button[type="submit"]:disabled { opacity: 0.55; cursor: not-allowed; }

/* --- Bildguiden "skapa konto och anmäl dig" (olänkad, 2026-09-13) ------- */

.guide { width: min(60rem, 100% - 2.5rem); }
.guide__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 4vw, 3rem); }
.guide__steg { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 52rem) {
  .guide__steg { grid-template-columns: 17rem minmax(0, 1fr); gap: 1.5rem; }
}
.guide__text { position: relative; padding-left: 3.25rem; }
.guide__nr {
  position: absolute; left: 0; top: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--guld); color: var(--natt);
  display: grid; place-items: center;
  font-stretch: 80%; font-weight: 800; font-size: 1.2rem;
}
.guide__text h2 { margin: 0.35rem 0 0.4rem; font-size: 1.15rem; text-transform: uppercase; font-stretch: 104%; }
.guide__text p { margin: 0; font-family: var(--brod); font-size: 1.05rem; line-height: 1.55; }
.guide__bild { margin: 0; }
.guide__bild img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--linje); border-radius: 6px;
  box-shadow: 0 10px 30px -18px rgb(0 22 54 / 0.45);
}
.guide__fot { margin-top: 3rem; color: var(--grau); font-size: 0.95rem; }
.guide__flode { margin: 0 auto clamp(2.5rem, 5vw, 4rem); max-width: 34rem; }
.guide__flode svg { width: 100%; height: auto; display: block; font-family: var(--ui); }
.guide__flode figcaption { text-align: center; color: var(--grau); font-size: 0.9rem; margin-top: 0.75rem; }

/* --- Startlistan på tävlingssidan (2026-09-14) --------------------------- */

.anmalan__tabellyta { overflow-x: auto; }
.startlista { width: 100%; border-collapse: collapse; font-family: var(--ui); font-size: 0.95rem; }
.startlista th {
  text-align: left; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--grau); font-weight: 700; padding: 0.35rem 0.75rem 0.35rem 0; white-space: nowrap;
  border-bottom: 1px solid var(--papper-mork);
}
.startlista td { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--papper-mork); vertical-align: baseline; }
.startlista__nr { width: 2.5rem; font-variant-numeric: tabular-nums; color: var(--grau); }
.startlista__forare { font-weight: 600; }
.startlista__ort { color: var(--grau); }
.startlista .anmalan__vantar { margin-left: 0.5rem; }
.startlista__grupp th { padding-top: 0.9rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--guld-mork, #b08c00); border-bottom: 1px solid var(--papper-mork); }
.startlista__foranmald td { color: var(--grau); }

/* --- Frågor och svar per tävling (2026-09-18) ---------------------------- */

.faq__lista { list-style: none; margin: 0; padding: 0; }
.faq__post + .faq__post { margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid var(--papper-mork); }
.faq__post h2 { font-size: 1.35rem; margin: 0 0 0.6rem; text-transform: none; font-stretch: 104%; }
.faq__post .brodtext p { margin: 0 0 0.85rem; }
.faq-lank { margin-top: 1.5rem; }

/* Ingångens knappar med två rader (Daniel 2026-09-21): rubrikrad i versaler
   som förut, "Klicka här!" under i gemener. */
.vagval__knapp--tva { flex-direction: column; gap: 0.1rem; padding-block: 0.7rem; line-height: 1.2; }
.vagval__knapp--tva small { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none; opacity: 0.9; }
/* Testmaskinen 2026-09-21: två stycken i ingången läses som ett block, och
   "JAG HAR ETT NITROZ-KONTO" bryts i Chromium vid 360 px. */
.startval__text + .startval__text { margin-top: 0.7rem; }
@media (max-width: 26rem) {
  .vagval__knapp--tva { font-size: 0.82rem; letter-spacing: 0.04em; padding-inline: 1rem; }
}