/* Gubbdagis – startlista, vägskyltsgrammatik, klubbstugans anslagstavla. */

@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/barlow-400.7a686e7631.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/barlow-600.488b580981.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-600.5bc49d41f3.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-800.89eec21b1a.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/courier-prime-400.21bf7ff8d9.woff2") format("woff2"); }

/* Metriskt anpassade reservtypsnitt – ingen layoutförskjutning när WOFF2 laddats. */
@font-face { font-family: "Barlow Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 94%; ascent-override: 106.5%; descent-override: 21.3%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 79%; ascent-override: 126%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Courier Prime Fallback"; src: local("Courier New"), local("Courier"), local("Liberation Mono"); size-adjust: 100%; ascent-override: 78%; descent-override: 34%; line-gap-override: 0%; }

:root {
  --bg: #F7F5EE;          /* reflexvit */
  --ink: #1A1A1A;         /* skyltsvart */
  --ink-2: #5E5B54;       /* sekundär text, 5.7:1 */
  --rule: #8A877F;        /* linjegrå */
  --hair: #D3CFC4;
  --detail: #EEEBE2;
  --bib: #FFFFFF;
  --bib-ink: #1A1A1A;
  --yellow: #FFCD00;      /* varningsgul, Pantone 116 C */
  --on-yellow: #1A1A1A;
  --blue: #00508F;        /* ortsblå */
  --red: #B3261E;         /* stämpelröd */
  --focus: #00508F;
  --f-body: "Barlow", "Barlow Fallback", system-ui, sans-serif;
  --f-head: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", sans-serif;
  --f-mono: "Courier Prime", "Courier Prime Fallback", ui-monospace, monospace;
  --cols: 4.6rem 2.2rem minmax(0, 1fr) 13.5rem 4.2rem;
  --field: #FFFFFF;
  --gap: .9rem;
  --bar-h: 0px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151514;
    --ink: #ECE9E1;
    --ink-2: #A9A59B;
    --rule: #6E6B64;
    --hair: #34332F;
    --detail: #1F1F1D;
    --red: #E8766C;
    --focus: #FFCD00;
    --field: #1F1F1D;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.45 var(--f-body);
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
abbr[title] { text-decoration: none; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: .5rem; top: -4rem; background: var(--yellow); color: var(--on-yellow); padding: .6rem 1rem; font-weight: 600; z-index: 20; }
.skip:focus { top: .5rem; }
.meta { font-family: var(--f-mono); font-size: .8125rem; color: var(--ink-2); letter-spacing: 0; }
.muted { color: var(--ink-2); }
.linkish { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; min-height: 44px; }

/* ---------- Sidhuvud ---------- */
.mast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem 1.25rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.25rem 1rem .9rem;
}
.plate {
  display: inline-block;
  background: var(--yellow);
  color: var(--on-yellow);
  text-decoration: none;
  padding: .45rem .9rem .35rem;
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px var(--yellow), inset 0 0 0 5px #1A1A1A;
  font: 800 clamp(2rem, 5vw, 3rem)/1 var(--f-head);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.plate span { display: block; transform: translateY(.04em); }
.tagline { margin: 0; max-width: 34rem; font-size: 1.0625rem; }
.updated { margin: 0; text-align: right; }

/* ---------- Filterlist ---------- */
main { max-width: 76rem; margin: 0 auto; padding: 0 1rem; }
.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: .5rem 0 .25rem;
  margin: 0 -1rem;
  padding-inline: 1rem;
}
.bar-row { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
.bar-more { padding: .6rem 0 .5rem; border-bottom: 1px solid var(--rule); }
/* Utfälld från den klistriga listen när den ordinarie panelen är utom synhåll (eller på mobil). */
.bar-more.overlay {
  position: fixed;
  top: var(--bar-h);
  left: 0;
  right: 0;
  z-index: 6;
  max-height: calc(100vh - var(--bar-h));
  overflow-y: auto;
  padding: .75rem max(1rem, calc((100vw - 74rem) / 2)) 1rem;
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
}
.bar.more-visible .more-toggle { display: none; }
.more-sentinel { height: 1px; }
.bar-tools { margin-top: .5rem; }
.switch { display: inline-flex; border: 2px solid var(--ink); border-radius: 2px; }
.switch button {
  min-height: 44px;
  padding: 0 .9rem;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--ink);
  font: 600 1.0625rem/1 var(--f-head);
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.switch button:first-child { border-left: 0; }
.switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.search { flex: 1 1 14rem; display: flex; }
.search input, .lan select {
  width: 100%;
  min-height: 44px;
  padding: 0 .7rem;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--field);
  color: var(--ink);
}
.search input::placeholder { color: var(--ink-2); }
.lan select { width: auto; background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 600; padding-right: .5rem; }
.more-toggle { border-color: var(--ink); color: var(--ink); }
.more-toggle[aria-expanded="true"] { background: var(--ink); color: var(--bg); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip, .toggle, .more-toggle, .sub {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .7rem;
  border: 1.5px solid var(--fam, var(--ink));
  border-radius: 2px;
  background: transparent;
  color: var(--fam, var(--ink));
  font: 600 1rem/1 var(--f-head);
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: none;
}
.chip { border-color: var(--rule); color: var(--ink); }
.chip::before { content: ""; width: .7em; height: .7em; background: var(--fam); flex: none; }
.chip .n, .more-toggle .n { font: .75rem/1 var(--f-mono); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip[aria-pressed="true"]::before { outline: 1.5px solid var(--bg); }
.toggle[aria-pressed="true"] { background: var(--yellow); color: var(--on-yellow); border-color: var(--on-yellow); }
.reset { margin-left: auto; }
.status { margin: .35rem 0 0; min-height: 1.2em; font: .8125rem/1.3 var(--f-mono); color: var(--ink-2); }

/* ---------- Startlistan ---------- */
.colhead {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--gap);
  padding: .9rem 0 .2rem;
  font: .75rem/1 var(--f-mono);
  text-transform: uppercase;
  color: var(--ink-2);
}
.colhead span:last-child { text-align: right; }
.month { margin: 0 0 1.25rem; }
.ev { scroll-margin-top: calc(var(--bar-h) + 4rem); }
.month h2 {
  position: sticky;
  top: var(--bar-h);
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0;
  padding: .55rem 0 .35rem;
  background: var(--bg);
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font: 800 1.75rem/1 var(--f-head);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.m-year { font-weight: 600; color: var(--ink-2); }
.m-count { margin-left: auto; text-transform: none; }

.startlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--gap);
}
.startlist > li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.wk {
  padding: .7rem 0 .2rem;
  border-bottom: 1px solid var(--hair);
  font: .8125rem/1 var(--f-mono);
  color: var(--ink-2);
}
.wk > span:first-child { grid-column: 1; color: var(--ink); font-weight: 700; }
.wk .wk-dates { grid-column: 2 / 4; }
/* <details> lägger innehållet i en egen box (::details-content), så summary får samma spår som listan i stället för subgrid. */
.ev details { grid-column: 1 / -1; display: block; }
.ev summary {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--gap);
  align-items: center;
  min-height: 3.25rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--hair);
  list-style: none;
  cursor: pointer;
}
.ev summary::-webkit-details-marker { display: none; }
.ev summary:hover, .ev details[open] > summary { background: var(--detail); }
.ev details[open] > summary { border-bottom-color: transparent; }
.ev summary:hover .nm, .ev details[open] .nm { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

.c-date { display: flex; align-items: center; gap: .25rem; white-space: nowrap; }
.bib {
  display: inline-grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.35rem;
  padding: 0 .2rem;
  background: var(--bib);
  color: var(--bib-ink);
  border: 1.5px solid #1A1A1A;
  border-radius: 2px;
  font: 800 1.75rem/1 var(--f-head);
  letter-spacing: -.01em;
}
.bib-to { font: 600 1rem/1 var(--f-head); color: var(--ink-2); }
.c-wd { font: 600 1rem/1 var(--f-head); text-transform: uppercase; color: var(--ink-2); }
.c-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.c-place { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-code { text-align: right; }
.c-code abbr {
  display: inline-block;
  min-width: 3.4em;
  padding: .2em .35em .12em;
  border: 1.5px solid var(--fam);
  border-radius: 2px;
  color: var(--fam);
  font: 800 .9375rem/1 var(--f-head);
  letter-spacing: .05em;
  text-align: center;
}
.chip-new {
  display: inline-block;
  vertical-align: .12em;
  margin-left: .25rem;
  padding: .18em .35em .1em;
  background: var(--yellow);
  color: var(--on-yellow);
  box-shadow: inset 0 0 0 1px #1A1A1A;
  border-radius: 2px;
  font: 800 .75rem/1 var(--f-head);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.stamp {
  display: inline-block;
  margin-left: .5rem;
  padding: .12em .4em .05em;
  border: 3px double var(--red);
  border-radius: 2px;
  color: var(--red);
  font: 800 .875rem/1 var(--f-head);
  text-transform: uppercase;
  letter-spacing: .1em;
  transform: rotate(-4deg);
  opacity: .92;
}
.stamp-big { font-size: 2.5rem; transform: rotate(-3deg); margin: .5rem 0; }
.is-cancelled .nm { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.sign-blue {
  display: inline-block;
  padding: .15em .45em .1em;
  background: var(--blue);
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--blue), inset 0 0 0 3px #fff;
  border-radius: 2px;
  font: 600 .9375rem/1.15 var(--f-head);
  letter-spacing: .02em;
}

/* Detaljraden: tidsplan */
.tidsplan {
  padding: .5rem 0 1rem calc(6.8rem + 2 * var(--gap));
  border-bottom: 1px solid var(--ink);
}
.ev details[open] { background: var(--detail); }
.tidsplan dl { margin: 0; display: grid; gap: .3rem; }
.tidsplan dl > div { display: grid; grid-template-columns: 9ch 1fr; gap: .75rem; }
.tidsplan dt { font: .8125rem/1.6 var(--f-mono); text-transform: uppercase; color: var(--ink-2); }
.tidsplan dd { margin: 0; }
.tidsplan p { margin: 0; }
.ai-note { font-weight: 600; }
.src-list { margin: .15rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .1rem 1rem; font: .875rem/1.6 var(--f-mono); }
.also { font-size: .9375rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .9rem !important; }
.go, .btn-cal {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 2px solid var(--ink);
  border-radius: 2px;
  font: 800 1.0625rem/1 var(--f-head);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
}
.go { background: var(--ink); color: var(--bg); }
.go:hover { background: var(--bg); color: var(--ink); }
.btn-cal { background: transparent; }
.btn-cal:hover { background: var(--bg); }
.report { font-size: .9375rem; color: var(--ink-2); display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Tomt läge, kalenderlänkar ---------- */
.empty { padding: 2.5rem 0; border-top: 4px solid var(--ink); }
.empty-big { font: 800 clamp(1.5rem, 4vw, 2.25rem)/1.1 var(--f-head); text-transform: uppercase; margin: 0 0 .5rem; }
.cal-links { margin: 2.5rem 0 1rem; padding-top: .75rem; border-top: 4px solid var(--ink); }
.cal-links h2 { font: 800 1.375rem/1 var(--f-head); text-transform: uppercase; margin: 0 0 .5rem; }
.cal-links p { margin: 0 0 .6rem; }
.cal-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.cal-links li a { display: inline-flex; min-height: 44px; align-items: center; color: var(--fam); font-weight: 600; }

/* ---------- Månadsvy ---------- */
.mv { margin: 0 0 1.5rem; }
.mv h2 { font: 800 1.75rem/1 var(--f-head); text-transform: uppercase; margin: 0; padding: .55rem 0 .35rem; border-top: 4px solid var(--ink); }
.mv table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mv th { font: .75rem/1 var(--f-mono); text-transform: uppercase; color: var(--ink-2); text-align: left; padding: .4rem .3rem; border-bottom: 1px solid var(--ink); }
.mv th:first-child, .mv td.w { width: 3.2rem; }
.mv td { vertical-align: top; height: 5.5rem; padding: .25rem .3rem; border-bottom: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.mv td.w { border-left: 0; font: .8125rem/1.4 var(--f-mono); color: var(--ink-2); }
.mv td.out { background: transparent; color: var(--rule); }
.mv td.today .d { background: var(--yellow); color: var(--on-yellow); padding: 0 .2rem; }
.mv td.past .d { color: var(--ink-2); font-weight: 600; }
.mv .d { display: inline-block; font: 800 1.125rem/1.2 var(--f-head); }
.mv ul { list-style: none; margin: .15rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem; }
.mv li a {
  display: inline-block;
  padding: .12em .3em .06em;
  border: 1.5px solid var(--fam);
  color: var(--fam);
  border-radius: 2px;
  text-decoration: none;
  font: 800 .8125rem/1 var(--f-head);
  letter-spacing: .04em;
}
.mv .more { font: .75rem/1.4 var(--f-mono); color: var(--ink-2); }

/* ---------- Karta: nummerlappar på en dämpad karta ---------- */
.karta { margin: .75rem 0 0; scroll-margin-top: calc(var(--bar-h) + .5rem); }
.map {
  position: relative;
  isolation: isolate;
  z-index: 0;
  height: clamp(22rem, calc(100vh - var(--bar-h) - 6rem), 52rem);
  height: clamp(22rem, calc(100dvh - var(--bar-h) - 6rem), 52rem);
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--detail);
}
.map-loading { margin: 0; padding: 2rem 1rem; font: 600 1.25rem/1.2 var(--f-head); text-transform: uppercase; color: var(--ink-2); }
.karta .leaflet-container { background: var(--detail); font: 400 1rem/1.4 var(--f-body); }
.karta .leaflet-container a { color: inherit; }
.map img.leaflet-tile { filter: grayscale(.6) contrast(1.03); outline: 1px solid transparent; }   /* outline: inga glipor mellan plattorna i Chrome */
@media (prefers-color-scheme: dark) {
  .map:not(.map-dark-tiles) img.leaflet-tile { filter: grayscale(.9) invert(1) hue-rotate(180deg) brightness(.82) contrast(.92); }
  .map.map-dark-tiles img.leaflet-tile { filter: none; }
}

.karta .pin-wrap { background: none; border: 0; }
.karta .pin-wrap:focus { outline: none; }
.karta .pin-wrap:focus-visible .pin { outline: 3px solid var(--focus); outline-offset: 2px; }
.pin {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: #FFFFFF;
  color: #1A1A1A;
  border: 2px solid #1A1A1A;
  border-top: 9px solid var(--fam, #1A1A1A);
  border-radius: 2px;
  font: 800 1.375rem/1 var(--f-head);
  letter-spacing: -.01em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.pin-n { transform: translateY(-.02em); }
.pin-wide { width: 56px; }
/* Bara orten är känd: streckad, genomskinlig lapp. */
.pin-approx {
  border: 2px dashed #1A1A1A;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 5px 0 var(--fam, #1A1A1A);
  color: #3A3935;
}
.pin-off .pin-n { color: #B3261E; text-decoration: line-through; text-decoration-thickness: 2px; }
/* Kluster: varningsgul skylt med dubbel kant, som logotypens plåt. */
.pin-cluster {
  width: 48px;
  height: 48px;
  background: var(--yellow);
  color: #1A1A1A;
  border: 0;
  box-shadow: inset 0 0 0 2px var(--yellow), inset 0 0 0 4px #1A1A1A, 0 1px 3px rgba(0, 0, 0, .35);
}
.pin-cluster.pin-wide { width: 58px; }
.karta .leaflet-marker-icon:hover .pin { transform: translateY(-1px); }

.map-legend { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; padding: .5rem 0 .25rem; color: var(--ink-2); }
.lg { display: inline-flex; align-items: center; gap: .45rem; }
.pin-s { width: 28px; height: 28px; font-size: .9375rem; border-top-width: 6px; box-shadow: none; }
.pin-s.pin-approx { border-top-width: 2px; box-shadow: inset 0 3px 0 #1A1A1A; }
.pin-s.pin-cluster { width: 30px; height: 30px; box-shadow: inset 0 0 0 1.5px var(--yellow), inset 0 0 0 3px #1A1A1A; }
.pin-s.fam-none { --fam: #1A1A1A; }

/* Kontroller: fyrkantiga, svarta kanter, 44 px. */
.karta .leaflet-bar { border: 2px solid var(--ink); border-radius: 2px; box-shadow: none; }
.karta .leaflet-bar a {
  width: 44px;
  height: 44px;
  line-height: 42px;
  background: var(--bg);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  font: 800 1.625rem/42px var(--f-head);
}
.karta .leaflet-bar a:last-child { border-bottom: 0; }
.karta .leaflet-bar a:hover, .karta .leaflet-bar a:focus-visible { background: var(--ink); color: var(--bg); }
.karta .leaflet-bar a.leaflet-disabled { background: var(--detail); color: var(--rule); }
.map-home {
  min-height: 44px;
  padding: 0 .8rem;
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 2px;
  font: 600 1rem/1 var(--f-head);
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.map-home:hover { background: var(--ink); color: var(--bg); }
.map-pop-open .leaflet-top.leaflet-right { visibility: hidden; }
.karta .leaflet-control-attribution {
  padding: .15rem .45rem;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  color: var(--ink);
  font: .75rem/1.5 var(--f-mono);
}
.karta .leaflet-control-attribution a { text-decoration: underline; }

/* Popup: en liten startlista för banan. */
.karta .leaflet-popup-content-wrapper {
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 2px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .3);
}
.karta .leaflet-popup-tip { background: var(--ink); box-shadow: none; }
.karta .leaflet-popup-content { margin: .7rem .85rem .35rem; font: 400 1rem/1.35 var(--f-body); }
.karta .leaflet-container a.leaflet-popup-close-button {
  width: 44px;
  height: 44px;
  top: 0;
  right: 0;
  color: var(--ink);
  font: 800 1.625rem/44px var(--f-head);
}
.pop p { margin: 0; }
.pop-place { padding-right: 2.25rem; }
.pop-place .sign-blue { font-size: 1.125rem; }
.pop-where { margin-top: .3rem !important; }
.pop-approx {
  margin-top: .4rem !important;
  padding: .3rem .5rem;
  border: 1.5px dashed var(--ink-2);
  font-size: .9375rem;
}
.pop-list { list-style: none; margin: .55rem 0 0; padding: 0; border-top: 2px solid var(--ink); }
.pop-list > li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .6rem; padding: .5rem 0 .2rem; border-bottom: 1px solid var(--hair); }
.pop-list > li:last-child { border-bottom: 0; }
.pop-date { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.pop .bib { min-width: 2.3rem; height: 2.05rem; font-size: 1.5rem; }
.pop-mon { font: 600 .875rem/1.05 var(--f-head); text-transform: uppercase; color: var(--ink-2); }
.pop-nm { font-weight: 600; overflow-wrap: anywhere; }
.is-cancelled .pop-nm { text-decoration: line-through; }
.pop-code {
  display: inline-block;
  padding: .15em .3em .08em;
  border: 1.5px solid var(--fam);
  border-radius: 2px;
  color: var(--fam);
  font: 800 .8125rem/1 var(--f-head);
  letter-spacing: .05em;
  vertical-align: .1em;
}
.pop-act { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.pop-act a, .pop-act button { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; font-weight: 600; }
.pop-act a { text-decoration: none; }
.pop-act a:hover { text-decoration: underline; }
@media (pointer: fine) {
  .pop-act a, .pop-act button { min-height: 2rem; }
}

.approx-note {
  display: inline-block;
  padding: .12em .4em .08em;
  border: 1.5px dashed var(--ink-2);
  border-radius: 2px;
  color: var(--ink-2);
  font: .8125rem/1.2 var(--f-mono);
}

/* Platserna som lista – samma innehåll som kartan, för skärmläsare och tangentbord. */
.map-list { margin: 1rem 0 0; border-top: 4px solid var(--ink); }
.map-list summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  font: 800 1.25rem/1 var(--f-head);
  text-transform: uppercase;
  cursor: pointer;
}
.map-list summary .meta { text-transform: none; font-weight: 400; }
.map-places { list-style: none; margin: .25rem 0 0; padding: 0; columns: 20rem; column-gap: 2rem; }
.map-places > li { break-inside: avoid; padding: .4rem 0 .5rem; border-bottom: 1px solid var(--hair); }
.map-places > li > button { font-weight: 600; min-height: 36px; text-align: left; }
.map-places > li > .meta { display: block; }
.map-places ul { list-style: none; margin: .2rem 0 0; padding: 0; font-size: .9375rem; }
.map-places ul a { display: inline-block; padding: .15rem 0; }
.btn-dir { text-decoration: none; }

/* ---------- Annonser: sponsorruta ur ett tävlingsprogram ---------- */
.ad {
  position: relative;
  max-width: 48rem;
  margin: 1.75rem auto;
  padding: 1rem .75rem .75rem;
  border: 3px double var(--ink);
  border-radius: 0;
}
.ad-label {
  position: absolute;
  top: -.7rem;
  left: .75rem;
  padding: 0 .4rem;
  background: var(--bg);
  font: .75rem/1.4 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-2);
}
.ad-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 90px; width: 100%; }
.ad-list .ad-body, .ad-footer .ad-body { aspect-ratio: 728 / 90; min-height: 90px; max-height: 120px; }
.ad-detail { margin: 1rem 0 0; max-width: 22rem; }
.ad-detail .ad-body { aspect-ratio: 320 / 100; min-height: 100px; }
.ad-dummy { border: 1px dashed var(--rule); text-align: center; font: 600 1rem/1.3 var(--f-head); text-transform: uppercase; letter-spacing: .06em; padding: .5rem; }
.ad-sponsor { text-decoration: none; }
.ad-sponsor img { max-height: 90px; max-width: 100%; object-fit: contain; }
.ad-name { font: .8125rem/1 var(--f-mono); }
ins.adsbygoogle { display: block; }
.detail-ad-tpl { display: none; }

/* ---------- Sidfot ---------- */
.foot {
  max-width: 76rem;
  margin: 2rem auto 0;
  padding: 1rem 1rem 2.5rem;
  border-top: 4px solid var(--ink);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.foot-links a, .foot-links button { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.foot-note { max-width: 40rem; color: var(--ink-2); }

/* ---------- Textsidor och formulär ---------- */
.text { max-width: 42rem; }
.text h1 { font: 800 clamp(2rem, 5vw, 2.75rem)/1.05 var(--f-head); text-transform: uppercase; margin: 1rem 0 .75rem; padding-top: .75rem; border-top: 4px solid var(--ink); }
.text h2 { font: 800 1.375rem/1.1 var(--f-head); text-transform: uppercase; margin: 1.75rem 0 .5rem; }
.lead { font-size: 1.125rem; }
.fb fieldset { border: 0; padding: 0; margin: 1rem 0; }
.fb legend { font: 800 1.125rem/1 var(--f-head); text-transform: uppercase; margin-bottom: .4rem; }
.radio { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.radio input { width: 1.25rem; height: 1.25rem; accent-color: var(--ink); margin: 0; }
.field { display: block; margin: 1rem 0 .25rem; font-weight: 600; }
.field input, .field textarea {
  display: block;
  width: 100%;
  margin-top: .3rem;
  min-height: 44px;
  padding: .55rem .7rem;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--field);
  color: var(--ink);
  font-weight: 400;
}
.opt { font-weight: 400; color: var(--ink-2); }
.hint { font-size: .9375rem; color: var(--ink-2); margin: .25rem 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.event-ref { margin: 1rem 0; padding: .6rem .8rem; background: var(--detail); border-left: 0; border-top: 2px solid var(--ink); }
.event-ref .label { font: .8125rem/1 var(--f-mono); text-transform: uppercase; color: var(--ink-2); }
.fb .go { font-size: 1.125rem; }

/* ---------- Mobil: två rader per evenemang ---------- */
@media (max-width: 40rem) {
  .mast { grid-template-columns: auto 1fr; padding-top: .9rem; }
  .tagline { grid-column: 1 / -1; font-size: 1rem; }
  .updated { grid-column: 1 / -1; text-align: left; }
  .plate { font-size: 2rem; }
  .colhead { display: none; }
  .bar { padding-bottom: .25rem; }
  .bar .switch { width: 100%; }
  .bar .switch button { flex: 1; padding: 0 .3rem; }
  .search { flex: 1 1 8rem; min-width: 0; }
  .bar-more:not(.overlay) { display: none; }
  .reset { margin-left: 0; }
  .month h2 { font-size: 1.5rem; }

  .startlist { display: block; }
  .startlist > li, .ev details { display: block; }
  .wk { display: flex; gap: .75rem; }
  .ev summary {
    grid-template-columns: 3.1rem auto minmax(0, 1fr) auto;
    grid-template-areas: "date name name name" "date wd place code";
    column-gap: .6rem;
    row-gap: .15rem;
    padding: .55rem 0;
  }
  .c-date { grid-area: date; flex-direction: column; align-items: flex-start; align-self: start; gap: .1rem; }
  .bib-to { font-size: .875rem; }
  .c-name { grid-area: name; line-height: 1.3; }
  .c-wd { grid-area: wd; font-size: .9375rem; }
  .c-place { grid-area: place; font-size: .9375rem; }
  .c-code { grid-area: code; }
  .c-code abbr { font-size: .8125rem; min-width: 0; }
  .tidsplan { padding: .5rem .25rem 1rem 3.7rem; }
  .tidsplan dl > div { grid-template-columns: 1fr; gap: 0; }
  .actions { flex-direction: column; align-items: stretch; }
  .go, .btn-cal { justify-content: center; }
  .ad-list .ad-body, .ad-footer .ad-body { aspect-ratio: 320 / 100; max-height: none; }
  .mv td { height: 4rem; padding: .15rem; }
  .mv th:first-child, .mv td.w { width: 2.2rem; }
  .mv li a { font-size: .6875rem; padding: .1em .2em; }
  .karta { margin: 0 -1rem; }
  .map { height: calc(100vh - var(--bar-h) - 5.5rem); height: calc(100dvh - var(--bar-h) - 5.5rem); min-height: 20rem; border-width: 0 0 2px; border-radius: 0; }
  .map-legend, .map-list { margin-inline: 1rem; }
  .map-legend { font-size: .75rem; gap: .25rem .9rem; }
  .map-places { columns: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .ev summary { transition: background-color .12s; }
}
@media (prefers-reduced-motion: reduce) {
  .karta .leaflet-marker-icon, .karta .leaflet-marker-shadow, .karta .leaflet-zoom-animated, .karta .leaflet-tile { transition: none !important; }
}

/* ---------- Utskrift: startlista för anslagstavlan ---------- */
.print-note { display: none; }
@media print {
  @page { margin: 12mm 12mm 14mm; }
  :root { --bg: #fff; --ink: #000; --ink-2: #333; --hair: #bbb; --detail: #fff; --rule: #666; }
  body { font-size: 10pt; background: #fff; color: #000; }
  .bar, .bar-more, .skip, .foot-links, .foot-note, .ad, .cal-links, .tidsplan, .chip-new, #manad, .karta, .empty, .tagline { display: none !important; }
  #lista[hidden] { display: block !important; }
  .mast { padding: 0 0 4mm; grid-template-columns: auto 1fr; }
  .plate { font-size: 20pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .print-note { display: block; margin: 0; font: 9pt/1.3 var(--f-mono); }
  main, .foot { max-width: none; padding: 0; }
  .colhead { padding-top: 2mm; }
  .month { break-inside: auto; }
  .month h2 { position: static; font-size: 15pt; padding: 2mm 0 1mm; border-top-width: 2pt; break-after: avoid; }
  .ev summary { min-height: 0; padding: 1mm 0; break-inside: avoid; background: none !important; }
  .bib { font-size: 13pt; height: auto; min-width: 7mm; padding: .5mm 1mm; }
  .wk { padding-top: 1.5mm; break-after: avoid; }
  .c-place { white-space: normal; }
  .foot { border-top-width: 1pt; margin-top: 4mm; padding-top: 2mm; }
  a { text-decoration: none; }
}

/* genererat: familjefärger */
.fam-rally{--fam:#965700}
.fam-folkrace{--fam:#B8321F}
.fam-rallycross{--fam:#3A741D}
.fam-bana{--fam:#1F5FA8}
.fam-karting{--fam:#0F766B}
.fam-drag{--fam:#A8205F}
.fam-trackday{--fam:#4D5A9E}
.fam-motocross{--fam:#556D00}
.fam-speedway{--fam:#6A3FB0}
.fam-roadracing{--fam:#0B6A94}
.fam-trial{--fam:#86561A}
.fam-snoskoter{--fam:#276E80}
.fam-bat{--fam:#435F7A}
.fam-traffar{--fam:#9A4515}
.fam-veteran{--fam:#6B5433}
.fam-marknad{--fam:#7A4585}
.fam-museum{--fam:#4C5D34}
.fam-ovrigt{--fam:#5F5F5A}
@media (prefers-color-scheme: dark){
.fam-rally{--fam:#AE7E3B}
.fam-folkrace{--fam:#CC6B5E}
.fam-rallycross{--fam:#65934F}
.fam-bana{--fam:#5B8ABF}
.fam-karting{--fam:#44948C}
.fam-drag{--fam:#C56A94}
.fam-trackday{--fam:#7B85B7}
.fam-motocross{--fam:#7C8F3B}
.fam-speedway{--fam:#9779C8}
.fam-roadracing{--fam:#488FAF}
.fam-trial{--fam:#A48053}
.fam-snoskoter{--fam:#598F9D}
.fam-bat{--fam:#74899D}
.fam-traffar{--fam:#B67957}
.fam-veteran{--fam:#96866E}
.fam-marknad{--fam:#A17BA8}
.fam-museum{--fam:#808C6F}
.fam-ovrigt{--fam:#878783}
}
@media print{
.fam-rally{--fam:#965700}
.fam-folkrace{--fam:#B8321F}
.fam-rallycross{--fam:#3A741D}
.fam-bana{--fam:#1F5FA8}
.fam-karting{--fam:#0F766B}
.fam-drag{--fam:#A8205F}
.fam-trackday{--fam:#4D5A9E}
.fam-motocross{--fam:#556D00}
.fam-speedway{--fam:#6A3FB0}
.fam-roadracing{--fam:#0B6A94}
.fam-trial{--fam:#86561A}
.fam-snoskoter{--fam:#276E80}
.fam-bat{--fam:#435F7A}
.fam-traffar{--fam:#9A4515}
.fam-veteran{--fam:#6B5433}
.fam-marknad{--fam:#7A4585}
.fam-museum{--fam:#4C5D34}
.fam-ovrigt{--fam:#5F5F5A}
}