/* Rallyfilm — den publika webben. Mörk ram, ljus arbetsyta, en accent (startskyltens gula).
   Hierarkin bärs av typografi, rader och linjer — inte av rutor. Inga externa resurser. */
:root {
  --bläck: #15161a; --bläck2: #3a3d44; --grå: #5d6169; --linje: #d8d4ca; --linje2: #b9b4a8;
  --papper: #f5f3ee; --vitt: #fffefb; --ram: #121316; --ramtext: #e9e7e1; --ramgrå: #a4a7ad;
  --gul: #f2a900; --gultext: #1b1300; --länk: #7a4f00;
  --ok: #0d6b4a; --okbg: #dff1e7; --vänta: #7a4f00; --väntabg: #f8e9c4; --fel: #a52a22; --felbg: #f9e1de;
  --bredd: 1240px; --kant: clamp(18px, 4vw, 44px);
  color-scheme: light;
}
.rf-topp { background: var(--ram); color: var(--ramtext); border-bottom: 3px solid var(--gul); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.rf-topp .rf-inre { max-width: var(--bredd); margin: 0 auto; padding: 0 var(--kant); min-height: 60px; display: flex; align-items: center; gap: 28px; }
body .rf-topp .rf-märke { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.rf-märke::before { content: ""; width: 22px; height: 22px; flex: none; background: conic-gradient(#fff 25%, var(--ram) 0 50%, #fff 0 75%, var(--ram) 0) 0 0 / 11px 11px; outline: 2px solid #fff; }
.rf-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
body .rf-topp .rf-nav a { color: var(--ramtext); text-decoration: none; padding: 10px 12px; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -3px; min-height: 44px; display: inline-flex; align-items: center; }
body .rf-topp .rf-nav a:hover { color: #fff; } body .rf-topp .rf-nav a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
.rf-nav .rf-konto { margin-left: 10px; border: 1px solid #4a4d55; border-radius: 4px; padding: 6px 12px; min-height: 36px; margin-bottom: 0; }
.rf-topp :focus-visible, body.rf :focus-visible { outline: 3px solid var(--gul); outline-offset: 2px; }
.rf-menyknapp { display: none; margin-left: auto; background: none; border: 1px solid #4a4d55; color: #fff; border-radius: 4px; min-height: 44px; padding: 0 14px; font: inherit; font-weight: 600; }
@media (max-width: 720px) {
  .rf-menyknapp { display: inline-flex; align-items: center; }
  .rf-topp .rf-inre { flex-wrap: wrap; gap: 0 12px; }
  .rf-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; margin: 0; padding: 4px 0 12px; }
  .rf-nav.öppen { display: flex; } .rf-nav a { border-bottom: 0; border-top: 1px solid #2b2d33; margin: 0; padding: 12px 2px; }
  .rf-nav .rf-konto { margin: 8px 0 0; justify-content: center; }
}

body.rf { margin: 0; background: var(--papper); color: var(--bläck); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
body.rf *, body.rf *::before, body.rf *::after { box-sizing: border-box; }
body.rf h1, body.rf h2, body.rf h3, body.rf p, body.rf ul, body.rf ol, body.rf dl, body.rf dd { margin: 0; padding: 0; }
body.rf h1 { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }
body.rf h2 { font-size: clamp(20px, 2vw, 26px); line-height: 1.15; letter-spacing: -.015em; font-weight: 800; }
body.rf h3 { font-size: 17px; font-weight: 700; }
body.rf a { color: var(--länk); text-underline-offset: 3px; }
body.rf button, body.rf input, body.rf select, body.rf textarea { font: inherit; color: inherit; }
.rf-hopp { position: absolute; left: -999px; } .rf-hopp:focus { left: 12px; top: 12px; z-index: 20; background: #fff; padding: 10px 14px; }
.rf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
main.rf-sida { flex: 1; width: 100%; max-width: var(--bredd); margin: 0 auto; padding: clamp(28px, 5vw, 64px) var(--kant) 80px; }
.rf-etikett { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grå); }
.rf-ingress { font-size: clamp(17px, 1.5vw, 20px); color: var(--bläck2); max-width: 56ch; }
.rf-dämpad { color: var(--grå); }
.rf-knapp { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 4px; border: 2px solid var(--bläck); background: transparent; font-weight: 700; text-decoration: none; cursor: pointer; color: var(--bläck) !important; }
.rf-knapp:hover { background: var(--bläck); color: #fff !important; }
.rf-knapp.primär { background: var(--gul); border-color: var(--gul); color: var(--gultext) !important; } .rf-knapp.primär:hover { background: #ffbe1f; border-color: #ffbe1f; color: var(--gultext) !important; }
.rf-knapp:disabled { opacity: .55; cursor: progress; }
.rf-länkknapp { background: none; border: 0; padding: 0; color: var(--länk); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }
.rf-nr { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 34px; padding: 0 8px; background: #fff; color: #111; border: 2px solid #111; border-radius: 3px; font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1; }
.rf-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; padding: 3px 10px; border-radius: 3px; background: #e9e6de; color: var(--bläck2); white-space: nowrap; }
.rf-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rf-status.klar { background: var(--okbg); color: var(--ok); } .rf-status.vänta { background: var(--väntabg); color: var(--vänta); } .rf-status.fel { background: var(--felbg); color: var(--fel); }
.rf-fält { display: grid; gap: 6px; } .rf-fält > span, .rf-fält > label { font-weight: 700; font-size: 15px; } .rf-fält small { color: var(--grå); font-size: 14px; }
.rf-fält input, .rf-fält select, .rf-fält textarea { width: 100%; min-height: 48px; padding: 10px 12px; background: var(--vitt); border: 1.5px solid var(--linje2); border-radius: 4px; }
.rf-fält input:hover, .rf-fält select:hover, .rf-fält textarea:hover { border-color: var(--bläck2); }
.rf-fält [aria-invalid="true"] { border-color: var(--fel); } .rf-felrad { color: var(--fel); font-size: 14.5px; font-weight: 600; }
.rf-notis { border-left: 4px solid var(--linje2); padding: 10px 14px; background: #ece9e1; } .rf-notis.fel { border-color: var(--fel); background: var(--felbg); color: #5e1611; } .rf-notis.vänta { border-color: var(--gul); background: var(--väntabg); }
.rf-tom { border-top: 2px solid var(--bläck); padding: 22px 0; display: grid; gap: 10px; max-width: 60ch; }
.rf-skelett { height: 58px; border-bottom: 1px solid var(--linje); background: linear-gradient(90deg, transparent, #ebe8e0 40%, transparent 80%) 0 0 / 200% 100%; animation: rf-glid 1.2s linear infinite; }
@keyframes rf-glid { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rf-skelett { animation: none; background: #ebe8e0; } html { scroll-behavior: auto; } }

/* Tävlingsrader: datum | namn och plats | vad som finns */
.rf-rader { list-style: none; border-top: 2px solid var(--bläck); }
.rf-rader > li { border-bottom: 1px solid var(--linje); }
.rf-rad { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 14px 4px; text-decoration: none; color: inherit !important; min-height: 64px; }
a.rf-rad:hover { background: #ece9e1; } a.rf-rad:hover .rf-radnamn { text-decoration: underline; text-underline-offset: 4px; }
.rf-datum { font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1.15; } .rf-datum small { display: block; font-weight: 500; color: var(--grå); font-size: 13.5px; }
.rf-radnamn { font-weight: 800; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -.01em; line-height: 1.2; } .rf-radplats { color: var(--grå); }
.rf-finns { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .rf-finns b { display: block; } .rf-finns span { color: var(--grå); font-size: 14px; }
@media (max-width: 560px) { .rf-rad { grid-template-columns: 64px minmax(0, 1fr); } .rf-finns { grid-column: 2; text-align: left; } .rf-finns b { display: inline; } }

/* Startsidan */
.rf-hem { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.rf-hem-intro { display: grid; gap: 22px; } .rf-hem-intro form { display: flex; gap: 10px; max-width: 520px; } .rf-hem-intro form input { flex: 1; min-width: 0; }
.rf-rubrikrad { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.rf-steg { margin-top: clamp(44px, 7vw, 96px); border-top: 1px solid var(--linje2); padding-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 4vw, 56px); counter-reset: steg; list-style: none; }
.rf-steg li { counter-increment: steg; display: grid; gap: 6px; align-content: start; } .rf-steg li::before { content: "0" counter(steg); font-weight: 800; font-size: 14px; letter-spacing: .1em; color: var(--länk); }
@media (max-width: 900px) { .rf-hem { grid-template-columns: 1fr; } .rf-steg { grid-template-columns: 1fr; } }

/* Arkivet: filter till vänster, rader till höger */
.rf-arkiv { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: 28px; }
.rf-filter { display: grid; gap: 22px; position: sticky; top: 16px; }
.rf-år { list-style: none; display: grid; } .rf-år a { display: flex; justify-content: space-between; padding: 9px 10px; text-decoration: none; color: var(--bläck) !important; border-left: 3px solid transparent; font-variant-numeric: tabular-nums; min-height: 40px; align-items: center; }
.rf-år a:hover { background: #ece9e1; } .rf-år a[aria-current="true"] { border-left-color: var(--bläck); font-weight: 800; background: #ece9e1; } .rf-år a span { color: var(--grå); font-weight: 500; }
.rf-årsrubrik { font-size: 15px; font-weight: 800; letter-spacing: .08em; color: var(--grå); padding: 26px 4px 8px; } .rf-årsrubrik:first-child { padding-top: 0; }
.rf-träffrad { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 14px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .rf-arkiv { grid-template-columns: 1fr; } .rf-filter { position: static; gap: 14px; }
  .rf-år { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: thin; } .rf-år a { border: 1.5px solid var(--linje2); border-radius: 4px; gap: 8px; white-space: nowrap; min-height: 44px; } .rf-år a[aria-current="true"] { border-color: var(--bläck); background: var(--bläck); color: #fff !important; } .rf-år a[aria-current="true"] span { color: #cfcfcf; }
}

/* Tävlingssidan */
.rf-brödsmulor { font-size: 14.5px; margin-bottom: 18px; }
.rf-tävlingshuvud { display: grid; gap: 12px; padding-bottom: 26px; border-bottom: 2px solid var(--bläck); }
.rf-fakta { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 16px; } .rf-fakta b { font-variant-numeric: tabular-nums; }
.rf-tävling { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: 28px; }
.rf-sök { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; margin: 14px 0 6px; }
.rf-sök .rf-stornr input { font-size: 26px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; min-height: 56px; } .rf-sök input { min-height: 56px; }
.rf-deltagare { list-style: none; margin-top: 12px; border-top: 1px solid var(--linje2); }
.rf-deltagare li { border-bottom: 1px solid var(--linje); }
.rf-deltagare button { display: grid; grid-template-columns: 58px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; width: 100%; text-align: left; background: none; border: 0; padding: 10px 4px; cursor: pointer; min-height: 56px; }
.rf-deltagare button:hover, .rf-deltagare button[aria-pressed="true"] { background: #ece9e1; } .rf-deltagare button[aria-pressed="true"] { box-shadow: inset 4px 0 0 var(--gul); }
.rf-deltagare .namn { font-weight: 700; } .rf-deltagare .bil { color: var(--grå); } .rf-deltagare .antal { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .rf-deltagare .antal.inga { font-weight: 500; color: var(--grå); }
.rf-panel { position: sticky; top: 16px; background: var(--vitt); border: 1.5px solid var(--bläck); border-top-width: 6px; padding: 22px; display: grid; gap: 16px; }
.rf-panel .rf-vald { display: flex; gap: 14px; align-items: center; } .rf-panel form { display: grid; gap: 14px; }
.rf-detaljer summary { cursor: pointer; font-weight: 700; padding: 8px 0; min-height: 44px; display: flex; align-items: center; } .rf-detaljer[open] summary { margin-bottom: 8px; } .rf-detaljer .rf-inne { display: grid; gap: 14px; }
.rf-kryss { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 15px; } .rf-kryss input { width: 22px; height: 22px; margin-top: 2px; }
@media (max-width: 900px) { .rf-tävling { grid-template-columns: 1fr; } .rf-panel { position: static; order: -1; } .rf-deltagare button { grid-template-columns: 58px minmax(0, 1fr) auto; } .rf-deltagare .bil { grid-column: 2; } .rf-sök { grid-template-columns: 110px minmax(0, 1fr); } }

/* Mina förfrågningar */
.rf-frågor { list-style: none; border-top: 2px solid var(--bläck); margin-top: 24px; }
.rf-frågor li { display: grid; grid-template-columns: 62px minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--linje); }
.rf-frågor .vad b { display: block; font-size: 18px; } .rf-frågor .nästa { color: var(--bläck2); font-size: 15px; } .rf-frågor .gör { display: flex; gap: 14px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 760px) { .rf-frågor li { grid-template-columns: 62px minmax(0, 1fr); } .rf-frågor .läge, .rf-frågor .gör { grid-column: 2; justify-content: flex-start; } }

.rf-om { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); margin-top: 28px; } .rf-om section { display: grid; gap: 12px; align-content: start; } .rf-om li { margin-left: 20px; }
@media (max-width: 800px) { .rf-om { grid-template-columns: 1fr; } }
.rf-fot { background: var(--ram); color: var(--ramgrå); font: 14px/1.5 system-ui, sans-serif; }
.rf-fot .rf-inre { max-width: var(--bredd); margin: 0 auto; padding: 22px var(--kant); display: flex; gap: 8px 28px; flex-wrap: wrap; justify-content: space-between; } body .rf-fot a { color: var(--ramtext); }
/* Statussidan (äldre markup): samma ram, bredare yta på skrivbord */
body.statussida main.rak { max-width: 980px; } body.statussida .topp { display: none; }

/* Leveranssidan: läget överst, klippen i ett rutnät */
.rf-nav.rf-alltid { display: flex !important; flex-direction: row; width: auto; margin-left: auto; padding: 0; } .rf-nav.rf-alltid a { border-top: 0 !important; padding: 10px 8px; }
.rf-statushuvud { display: grid; gap: 14px; padding-bottom: 26px; border-bottom: 2px solid var(--bläck); }
.rf-statusrubrik { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } body.rf .rf-statusrubrik h1 { font-size: clamp(28px, 3.6vw, 48px); }
.rf-nr.stor { min-width: 76px; height: 58px; font-size: 32px; border-width: 3px; }
.rf-framsteg { list-style: none; display: flex; max-width: 520px; } .rf-framsteg li { flex: 1; border-top: 4px solid var(--linje2); padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--grå); }
.rf-framsteg li.klar { border-color: var(--bläck); color: var(--bläck); } .rf-framsteg li.nu { border-color: var(--gul); color: var(--bläck); }
.rf-klippnät { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 36px 28px; margin-top: 30px; }
.rf-klipp { display: grid; gap: 12px; align-content: start; } .rf-klipp video, .rf-klipp img.foto { width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; object-fit: contain; }
.rf-klippinfo { display: grid; gap: 8px; } .rf-kliprad { display: flex; justify-content: space-between; gap: 10px; align-items: center; } body.rf .rf-kliprad h2 { font-size: 18px; }
.rf-svar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .rf-knapp.ja { border-color: var(--ok); color: var(--ok) !important; } .rf-knapp.ja:hover { background: var(--ok); color: #fff !important; }
.rf-knapp.nej { border-color: var(--linje2); color: var(--fel) !important; font-weight: 600; } .rf-knapp.nej:hover { background: var(--fel); border-color: var(--fel); color: #fff !important; }
.rf-skäl { margin-left: 18px !important; color: var(--bläck2); font-size: 15px; } .rf-remsa { display: flex; gap: 6px; overflow-x: auto; } .rf-remsa img { height: 64px; }
.rf-dinlänk { margin-top: 48px; border-top: 1px solid var(--linje2); padding-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; } .rf-dinlänk p { max-width: 52ch; }
.rf-länkrad { display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: center; } body.rf .rf-länkknapp.fara { color: var(--fel); }
@media (max-width: 760px) { .rf-dinlänk { grid-template-columns: 1fr; } }
/* Bekräftelsedialog (sida.js) */
dialog.ruta { border: 2px solid var(--bläck); border-radius: 4px; padding: 24px; width: min(92vw, 440px); background: var(--vitt); color: var(--bläck); font: 16px/1.5 system-ui, sans-serif; } dialog.ruta::backdrop { background: rgba(10, 10, 12, .6); }
dialog.ruta h2 { margin: 0 0 8px; font-size: 22px; } dialog.ruta p { margin: 0 0 18px; color: var(--bläck2); } dialog.ruta .svarrad { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
dialog.ruta .knapp { min-height: 46px; padding: 0 18px; border-radius: 4px; border: 2px solid var(--bläck); background: transparent; font: inherit; font-weight: 700; cursor: pointer; } dialog.ruta .knapp.primär { background: var(--gul); border-color: var(--gul); } dialog.ruta .knapp.farlig { background: var(--fel); border-color: var(--fel); color: #fff; }

/* Mobil: sökfälten först. Förfrågningsrutan flyttas upp först när det finns ett nummer (eller en beskrivning) att fråga på. */
.rf-utannr { min-height: 44px; } .rf-brödsmulor a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 900px) { .rf-tävling .rf-panel { order: 2; } .rf-tävling.harnr .rf-panel { order: -1; } }
@media (min-width: 901px) { .rf-utannr { display: none; } }
.rf-frågor { margin-top: 28px !important; }
/* Rutnätsbarn får krympa: årsraden rullar i sidled inom sig själv i stället för att vidga sidan. */
.rf-arkiv > *, .rf-tävling > *, .rf-hem > *, .rf-filter > * { min-width: 0; }
.rf-årsrubrik { padding-bottom: 10px; }
/* Stora skärmar: bredare satsyta och något större text, så att sidan inte blir en smal spalt i mitten. */
@media (min-width: 1700px) { :root { --bredd: 1480px; } body.rf { font-size: 17.5px; } .rf-tävling { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); } }
/* Integritetssidan och 404 (äldre innehåll): samma ram och samma ljusa yta som resten. */
body.rf-gammal { --bg: #f5f3ee; --yta: #fffefb; --yta2: #f0ede6; --kant: #d8d4ca; --kant2: #b9b4a8; --text: #15161a; --dämpad: #5d6169; --svag: #6b6f76; --accent-mörk: #7a4f00; background: var(--bg); color: var(--text); color-scheme: light; }
body.rf-gammal main.rak { max-width: 780px; margin-top: 36px; }
/* Startlistan: fast sista kolumn så att bil och antal står i raka spalter. */
.rf-deltagare button { grid-template-columns: 58px minmax(0, 1.2fr) minmax(0, 1fr) 96px; } .rf-deltagare .antal { text-align: right; }
@media (max-width: 900px) { .rf-deltagare button { grid-template-columns: 58px minmax(0, 1fr) 96px; } }
/* Fält visar alltid fokus (även när webbläsaren inte räknar det som tangentbordsfokus). */
body.rf .rf-fält input:focus, body.rf .rf-fält select:focus, body.rf .rf-fält textarea:focus { outline: 3px solid var(--gul); outline-offset: 2px; }

/* Sökförslag under fältet */
.rf-förslagsram { position: relative; flex: 1; min-width: 0; } .rf-förslagsram input { width: 100%; }
.rf-förslag { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 4px); list-style: none; background: var(--vitt); border: 1.5px solid var(--bläck); box-shadow: 0 10px 24px rgba(20, 20, 24, .16); max-height: 340px; overflow-y: auto; }
.rf-förslag li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 14px; padding: 10px 12px; min-height: 48px; cursor: pointer; border-bottom: 1px solid var(--linje); } .rf-förslag li:last-child { border-bottom: 0; }
.rf-förslag .namn { font-weight: 700; } .rf-förslag .antal { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-variant-numeric: tabular-nums; font-size: 14.5px; white-space: nowrap; } .rf-förslag .rf-dämpad { font-size: 14.5px; }
.rf-förslag li[aria-selected="true"] { background: #ece9e1; box-shadow: inset 4px 0 0 var(--gul); } .rf-förslag li.tom { cursor: default; color: var(--grå); display: block; }