/* ============================================
   ESKIL — Public landing page (no auth)
   Mobile-first; builds on tokens.css + app.css
   ============================================ */

body { background: var(--bg-muted); }

.pub-hero {
  position: relative;
  background: var(--scout-blue);
  color: var(--fg-on-blue);
  padding: var(--sp-8) 0 var(--sp-10);
  overflow: hidden;
}
.pub-hero-pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, black 0%, transparent 90%);
  pointer-events: none;
}
.pub-hero-symbol {
  position: absolute;
  right: -60px; top: 50%; transform: translateY(-50%);
  width: 480px; opacity: 0.08;
  pointer-events: none;
}
.pub-hero .page { position: relative; }
.pub-hero-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.pub-brand {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  text-decoration: none;
}
a.pub-brand:hover { opacity: 0.85; }
/* Right-hand hero cluster: Administrera (signed-in admins) + live pill. */
.pub-hero-actions {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
/* Låsningen bär BÅDE symbolen, ordbilden och taglinen. Förut låg symbolen
   och ett separat <span>ESKIL</span> bredvid varandra — ordet stod då två
   gånger så fort låsningen användes. Höjden styr; bredden följer med (3,2:1). */
/* .pub-logo bor i tokens.css — anmälningssidan laddar inte den här filen.
   Se kommentaren där för vad som gick fel när den bara stod här. */
.pub-hero h1 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(40px, 6vw, 72px);
  /* 1.05 clipped Å/Ä diacritics into the eyebrow above */
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 8px 0 var(--sp-4);
  max-width: 860px;
}
.pub-hero .meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-6);
  color: #a7bccf;
  font-size: 15px;
}
.pub-hero .meta b { color: var(--white); font-weight: 600; }
.pub-hero .lede {
  font-family: var(--font-serif); font-size: 20px; line-height: 1.55;
  color: #d2dde8; max-width: 720px; margin-top: var(--sp-4);
}

/* Status pill */
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.12);
  color: var(--white);
  padding: 6px 14px; border-radius: 999px;
  font-weight: 600; font-size: 13px;
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.status-pill .dot-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rover-yellow);
  box-shadow: 0 0 0 0 rgba(226,224,0,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(226,224,0,0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(226,224,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(226,224,0,0); }
}

/* Tabs on the public page live in a sticky bar under the hero */
.pub-tabs-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
  box-shadow: var(--shadow-xs);
}
.pub-tabs {
  max-width: 1200px; margin: 0 auto;
  padding: 0 var(--sp-6);
  display: flex; gap: 0; overflow-x: auto;
  scrollbar-width: none;
}
.pub-tabs::-webkit-scrollbar { display: none; }
.pub-tabs a {
  padding: 16px 20px;
  color: var(--fg2);
  text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color var(--dur-base), border-color var(--dur-base);
}
.pub-tabs a:hover { color: var(--scout-blue); }
.pub-tabs a.active { color: var(--scout-blue); border-bottom-color: var(--scout-blue); }

/* KPI row, reused from app.css but with slight tuning */
.pub-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.pub-kpi {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.pub-kpi .label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--fg3); }
.pub-kpi .val { font-family: var(--font-display); font-weight: 200; font-size: 42px; line-height: 1.05; margin-top: 6px; color: var(--scout-blue); }

/* Podium for Overall top-3 */
.podium {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: var(--sp-4);
  align-items: end;
  margin-bottom: var(--sp-8);
}
@media (max-width: 640px) { .podium { grid-template-columns: 1fr; gap: var(--sp-3); } }
.podium-step {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.podium-step.p1 { border-top: 4px solid var(--rover-yellow); min-height: 160px; }
.podium-step.p2 { border-top: 4px solid var(--scout-blue-400); min-height: 140px; }
.podium-step.p3 { border-top: 4px solid var(--avent-orange); min-height: 130px; }
.podium-step .rank {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg3);
}
.podium-step .score {
  font-family: var(--font-display); font-weight: 200;
  font-size: 46px; line-height: 1.05; color: var(--scout-blue);
  margin: 6px 0 2px;
}
.podium-step .p-name {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--fg1); margin-top: 4px;
}
.podium-step .p-kar {
  font-size: 13px; color: var(--fg2); margin-top: 2px;
}

/* Avdelning filter chips */
.avd-filter {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.avd-filter button {
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--fg1);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  cursor: pointer;
  transition: all var(--dur-base);
  display: inline-flex; align-items: center; gap: 6px;
}
.avd-filter button:hover { border-color: var(--scout-blue); }
.avd-filter button.active { background: var(--scout-blue); color: var(--white); border-color: var(--scout-blue); }
.avd-filter button.active .dot { filter: brightness(1.8); }

/* Avdelning cards with official illustrations */
.avd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.avd-card {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform var(--dur-base), box-shadow var(--dur-base);
  display: flex; flex-direction: column;
  text-decoration: none;     /* Anchor wrapper — don't underline card content */
  color: inherit;
}
.avd-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.avd-card.active { box-shadow: 0 0 0 3px var(--scout-blue); }
.avd-card .top {
  padding: var(--sp-4);
  min-height: 120px;
  display: flex; align-items: flex-end; justify-content: space-between;
  position: relative; overflow: hidden;
}
.avd-card .top img {
  position: absolute; right: -12px; bottom: -12px;
  height: 150px; width: auto;
  /* Convert illustrations into solid white silhouettes so they read cleanly
     on the colored blocks (the bundled PNGs are line-art with alpha which
     ended up looking washed-out). */
  filter: brightness(0) invert(1);
  opacity: 0.4;
}
/* Rover has a yellow background — white at 0.4 gets lost, so bump darker
   silhouettes via a different filter path. */
.avd-card.ro .top img {
  filter: brightness(0);     /* pure black */
  opacity: 0.18;
}
/* Ledare uses the scout symbol (inline SVG) — tints via currentColor, so no
   filter stack needed. Positioned like the PNG illustrations on the other
   cards but sized to the symbol's taller aspect ratio. */
.avd-card.le .top .avd-scout-symbol {
  position: absolute;
  right: 12px; bottom: 10px;
  width: 95px; height: 114px;
  color: rgba(255, 255, 255, 0.28);
  pointer-events: none;
}
.avd-card.sp .top { background: var(--spaer-green); color: white; }
.avd-card.up .top { background: var(--upp-blue); color: white; }
.avd-card.av .top { background: var(--avent-orange); color: white; }
.avd-card.ut .top { background: var(--utm-pink); color: white; }
.avd-card.ro .top { background: var(--rover-yellow); color: var(--rover-dark); }
.avd-card.le .top { background: var(--scout-blue); color: white; }
.avd-card .top .label {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  z-index: 1; position: relative;
}
.avd-card .bottom {
  padding: var(--sp-4) var(--sp-5);
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--border);
}
.avd-card .bottom .count {
  font-family: var(--font-display); font-weight: 700; font-size: 24px;
  color: var(--scout-blue);
}
.avd-card .bottom .count-label {
  font-size: 12px; color: var(--fg3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
}

/* Patrol card grid (public, read-only) */
.pat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.pat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  position: relative;
  transition: transform var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base);
  /* Card is a <button> now — reset default button chrome */
  text-align: left;
  color: inherit;
  font: inherit;
  width: 100%;
  cursor: pointer;
}
.pat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--scout-blue); }
.pat-card:active { transform: translateY(0); }
.pat-card .n { font-family: var(--font-mono); font-size: 11px; color: var(--fg3); }
.pat-card .name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--fg1); margin: 2px 0; }
.pat-card .kar { font-size: 13px; color: var(--fg2); }
.pat-card .progress {
  margin-top: 10px;
  height: 6px; border-radius: 999px;
  background: var(--gray-100);
  overflow: hidden;
}
.pat-card .progress > span { display: block; height: 100%; background: var(--scout-blue); }
.pat-card .pat-eta {
  margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--scout-blue);
  display: inline-flex; align-items: center; gap: 4px;
}
.pat-card .progress-label {
  font-size: 11px; color: var(--fg3); margin-top: 4px;
  display: flex; justify-content: space-between;
}

/* Section head for public */
.pub-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); margin: var(--sp-8) 0 var(--sp-4);
}
.pub-section-head h2 { margin: 0; color: var(--scout-blue); }
.pub-section-head .muted { font-size: 13px; }

/* Sub-tabs inside scoreboard (avd tabs) */
.sub-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tabs button {
  background: transparent;
  border: none;
  padding: 10px 14px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--fg2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.sub-tabs button.active { color: var(--scout-blue); border-bottom-color: var(--scout-blue); }

/* Mini leaderboard table on public */
.lb {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.lb table { width: 100%; border-collapse: collapse; }
.lb th, .lb td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.lb th {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg3);
  background: var(--bg-muted);
}
.lb tr:last-child td { border-bottom: none; }
.lb td.num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.lb tr.top1 td:first-child .lucide { color: var(--avent-orange); }

/* "Placeringsregler"-info on the public scoreboard */
.rules-info {
  background: var(--scout-blue-50);
  border: 1px solid var(--scout-blue-200);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: var(--sp-4);
  font-size: 14px;
  color: var(--fg1);
}
.rules-info summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--scout-blue);
  list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.rules-info summary::-webkit-details-marker { display: none; }
.rules-info summary::before {
  content: 'i';
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--scout-blue);
  color: #fff;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  font-style: italic;
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 700;
}
.rules-info[open] summary { margin-bottom: 8px; }
.rules-info ol {
  margin: 0; padding-left: 20px;
  color: var(--fg2);
}
.rules-info ol li { margin: 4px 0; }
.rules-info ol strong { color: var(--fg1); }
.lb .rank { font-weight: 700; color: var(--fg3); width: 50px; }
.lb .pname { font-weight: 600; color: var(--fg1); }
.lb .pkar  { font-size: 12px; color: var(--fg3); }
.lb .total { font-weight: 700; color: var(--scout-blue); font-size: 18px; }

/* Karta (placeholder or link) */
.map-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
#pub-map { height: 680px; width: 100%; background: var(--bg-muted); }
@media (max-width: 640px) {
  /* Full desktop height would swallow the whole viewport on phones. */
  #pub-map { height: 480px; }
}

/* Info popup on the special map points (S/M, S, M, P) */
.map-popup { font-family: var(--font-sans); min-width: 170px; max-width: 240px; }
.map-popup-title {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--avent-orange);
}
.map-popup-title.is-park { color: var(--scout-blue); }
.map-popup-name { font-weight: 700; font-size: 15px; color: var(--fg1); margin-top: 2px; }
.map-popup-note { font-size: 13px; color: var(--fg2); margin: 6px 0 0; white-space: pre-wrap; }
/* .leaflet-container a sets its own link color — out-specify it. */
.leaflet-popup-content .map-popup-dir {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px; font-size: 13px; font-weight: 600;
  color: var(--scout-blue);
}

/* Notes for special points (parking, start, finish) shown under the map */
.map-notes {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.map-note {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.map-note-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.map-note-head strong { color: var(--scout-blue); font-size: 15px; }
.map-note p {
  margin: 0;
  white-space: pre-wrap;
  color: var(--fg2);
  font-family: var(--font-serif, Georgia, serif);
}
.map-label {
  background: var(--scout-blue) !important;
  color: white !important;
  border: none !important;
  padding: 1px 7px !important;
  min-width: 20px;
  text-align: center;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px !important;
  white-space: nowrap;
}
.map-label::before { display: none !important; }

/* Start/finish label — yellow pill with blue text */
.map-label-sf {
  background: var(--rover-yellow) !important;
  color: var(--scout-blue) !important;
  font-weight: 800;
  padding: 2px 8px !important;
}

/* Parking label — blue pill wrapping the square-parking icon */
.map-label-park {
  background: var(--scout-blue) !important;
  color: #ffffff !important;
  padding: 4px !important;
  line-height: 0;
  min-width: 0;
}
.map-card .foot { padding: var(--sp-4); display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); font-size: 13px; color: var(--fg3); }

/* Footer */
.pub-foot {
  background: var(--scout-blue-900);
  color: #a7bccf;
  padding: var(--sp-10) 0;
  margin-top: var(--sp-16);
  font-size: 13px;
}
.pub-foot .page { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.pub-foot img { height: 28px; width: auto; }

/* Closed / unavailable states */
.pub-closed {
  background: var(--bg-muted);
  border: 2px dashed var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
  color: var(--fg3);
}
.pub-closed h3 { color: var(--fg1); margin-top: 0; }

.lb table tr.is-clickable { cursor: pointer; }
.lb table tr.is-clickable:hover td { background: var(--scout-blue-50, rgba(0,54,96,0.05)); }

/* Patrol detail modal (public page) */
.pub-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 20, 30, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1100; /* above Leaflet panes/controls (max 1000) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: pub-fade .15s ease;
}
@keyframes pub-fade { from { opacity: 0; } to { opacity: 1; } }
.pub-modal {
  background: var(--white);
  color: var(--fg1);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  animation: pub-pop .18s cubic-bezier(0.2, 0.9, 0.2, 1);
}
@keyframes pub-pop { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.pub-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.pub-modal-head h2 { font-size: 22px; color: var(--scout-blue); }
.pub-modal-head .icon-btn {
  background: var(--bg-muted);
  border: none;
  width: 36px; height: 36px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg1);
  flex-shrink: 0;
}
.pub-modal-totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border);
}
.pub-modal-totals > div {
  text-align: center;
  padding: 4px 0;
  border-radius: var(--r-sm);
}
.pub-modal-totals .val {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--fg1);
  line-height: 1.1;
}
.pub-modal-totals .val .of { font-size: 14px; color: var(--fg3); font-weight: 600; }
.pub-modal-totals .lbl {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--fg3);
  margin-top: 2px;
}
.pub-modal-totals .grand .val { color: var(--scout-blue); }
.pub-modal-hint {
  padding: var(--sp-3) var(--sp-5) 0;
  margin: 0;
  font-style: italic;
}
.pub-modal-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
}
.pub-modal-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.pub-modal-row:last-child { border-bottom: none; }
.pub-modal-row .num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--fg3);
}
.pub-modal-row .name { font-weight: 600; color: var(--fg1); }
.pub-modal-row .name.is-hidden { font-style: italic; color: var(--fg3); font-weight: 500; }
.pub-modal-row .pts {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  color: var(--scout-blue);
  white-space: nowrap;
}
.pub-modal-row .pts.muted { font-weight: 500; color: var(--fg3); font-size: 13px; }
.pub-modal-row .pts .extra {
  margin-left: 4px;
  font-size: 13px;
  color: var(--avent-orange);
}
.pub-modal-row .note {
  grid-column: 2 / -1;
  font-family: var(--font-serif, Georgia, serif);
  color: var(--fg2);
  font-size: 14px;
  margin-top: 2px;
  white-space: pre-wrap;
}
.pub-modal-row.is-pending { opacity: 0.65; }

/* Unpublished scores: completion matrix + notice */
.lb.lb-matrix { overflow-x: auto; }
.lb td.done-check .lucide { color: var(--success); }
.pub-notice {
  display: flex; align-items: center; gap: 8px;
  background: var(--scout-blue-50);
  border: 1px solid var(--scout-blue-200);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: var(--sp-4);
  font-size: 14px;
  color: var(--fg1);
}
.pub-notice .lucide { color: var(--scout-blue); flex-shrink: 0; }
.pub-modal-totals.no-scores { grid-template-columns: 1fr; }
.pub-modal-row .pts.done-icon { color: var(--success); }

/* Landing page (/) — competition cards + feature pitch */
.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
  align-items: stretch;
}
/* Equal-height cards: fill the grid row, push the CTA row to the bottom. */
.landing-grid > .card {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.landing-grid > .card .btn-row { margin-top: auto; }
.landing-card {
  display: flex;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.landing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.landing-feature-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--scout-blue-50);
  color: var(--scout-blue);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* Screenshot from the demo track at the top of a feature card */
.landing-shot {
  width: calc(100% + 2 * var(--sp-5));
  margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-4);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: 1px solid var(--border);
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  background: var(--bg-muted);
}

/* Shared avdelning dot (reused from app.css) */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot.sp { background: var(--spaer-green); }
.dot.up { background: var(--upp-blue); }
.dot.av { background: var(--avent-orange); }
.dot.ut { background: var(--utm-pink); }
.dot.ro { background: var(--rover-yellow); }
.dot.le { background: var(--gray-700); }

/* --- Anmälan CTA ------------------------------------------------------------ */
.pub-hero .hero-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--sp-6);
  background: var(--rover-yellow); color: var(--scout-blue);
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  padding: 12px 22px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.pub-hero .hero-cta:hover { filter: brightness(1.05); }

.reg-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--avent-orange);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-8);
}
.reg-cta h2 { margin: 2px 0 4px; font-size: 22px; color: var(--scout-blue); }
.reg-cta .reg-meta { color: var(--fg2); font-size: 14px; }
.reg-cta .reg-meta b { color: var(--fg1); }
.reg-cta .btn-anmal {
  background: var(--scout-blue); color: #fff; text-decoration: none;
  font-family: var(--font-display); font-weight: 700;
  padding: 12px 24px; border-radius: var(--r-md); white-space: nowrap;
}
.reg-cta .btn-anmal:hover { background: #00284a; }
.reg-cta.is-info { border-left-color: var(--upp-blue); }

/* --- Kommande starter (live) ------------------------------------------------ */
.starts-list {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-8);
}
.start-row {
  display: grid;
  grid-template-columns: 28px 64px 1fr auto auto;
  gap: var(--sp-4); align-items: center;
  padding: 10px var(--sp-5);
  border-bottom: 1px solid var(--border);
  color: inherit; text-decoration: none;
}

/* Hero quick-links: kalender, dela, föregående årgång */
.pub-hero-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: 12px; }
.pub-hero-links a {
  display: inline-flex; align-items: center; gap: 6px;
  color: #cfe0ef; font-size: 13.5px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.pub-hero-links a:hover { color: #fff; }

/* Favoritpatrull — stjärnan pinnar raden överst (bara i denna webbläsare). */
.fav-star {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  color: var(--fg3);
  display: inline-flex;
  align-items: center;
}
.fav-star.is-on { color: var(--rover-yellow, #E2B100); }
.fav-star.is-on svg { fill: currentColor; }
.pname .fav-star { padding: 2px 4px 2px 0; vertical-align: -3px; }
.start-row.is-fav, .lb tr.is-fav td { background: #fdf7e2; }
.start-row:last-child { border-bottom: none; }
.start-row:hover { background: var(--bg-muted); }
.start-row .st-time { font-family: var(--font-mono); font-weight: 700; color: var(--scout-blue); font-size: 17px; }
.start-row .st-who .nm { font-weight: 700; }
.start-row .st-who .sub { font-size: 13px; color: var(--fg3); }
.start-row .st-count { font-size: 13px; font-weight: 700; color: var(--avent-orange); white-space: nowrap; }
.start-row .st-link { font-size: 13px; color: var(--scout-blue); white-space: nowrap; }
.start-row.is-now .st-time, .start-row.is-now .st-count { color: var(--utm-pink); }
@media (max-width: 560px) {
  .start-row { grid-template-columns: 24px 56px 1fr auto; }
  .start-row .st-link { display: none; }
}

/* Mini-startskärm: next start highlighted, GÅR NU-state pulses */
.start-row.is-next {
  background: var(--scout-blue);
  color: #fff;
  padding-top: 16px; padding-bottom: 16px;
}
.start-row.is-next:hover { background: #00284a; }
.start-row.is-next .st-time { color: var(--rover-yellow); font-size: 24px; }
.start-row.is-next .st-who .nm { font-size: 19px; }
.start-row.is-next .st-who .sub { color: #a7bccf; }
.start-row.is-next .st-count { color: #fff; font-size: 18px; }
.start-row.is-next .st-link { color: #a7bccf; }
.start-row.is-now .st-count {
  color: var(--rover-yellow);
  animation: ga-nu-pulse 1s ease-in-out infinite;
}
.start-row.is-now:not(.is-next) .st-count { color: var(--utm-pink); }
@keyframes ga-nu-pulse { 50% { opacity: 0.45; } }

/* Startlista: scrollable window over all starts, past rows dimmed */
.starts-list {
  position: relative;
  max-height: 440px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.start-row.is-past { opacity: 0.55; }
.start-row.is-past .st-time { color: var(--fg3); }
.start-row.is-past .st-count { color: var(--fg3); font-weight: 400; }
.start-row.is-now .st-count {
  color: var(--utm-pink);
  animation: ga-nu-pulse 1s ease-in-out infinite;
}
@keyframes ga-nu-pulse { 50% { opacity: 0.4; } }

/* Intressepunkter — samma nålform som parkeringen hade. Bakgrunden är
   genomskinlig: färgen sitter på cirkeln under (se drawPlaces i places.js),
   så etiketten bara bär symbolen. */
.map-label-place {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  padding: 0 !important;
  line-height: 0;
  min-width: 0;
}
.map-label-place svg { display: block; }

/* Senast sedd-raden i patrullmodalen — tystnaden som information. */
.pub-senast {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 var(--sp-3);
  padding: 10px 14px;
  background: var(--scout-blue-50);
  border-radius: var(--r-md);
  color: var(--scout-blue);
  font-weight: 600; font-size: 14px;
}

/* --- Publik anslagstavla -------------------------------------------------- */
/* Anslagen bor i HJÄLTEN, i dess högra halva. Förut låg de i en grå remsa
   ovanför: de sköt ner varumärket, såg ut som ett felmeddelande från
   webbläsaren, och den halva av hjälten som ändå stod tom fylldes aldrig.
   Nu står tävlingens namn och det ledningen säger bredvid varandra — man ser
   båda i samma blick, och inget hoppar när ett anslag kommer eller går. */
.pub-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: var(--sp-6) var(--sp-8);
  align-items: start;
}
.anslag-kol { padding-top: var(--sp-2); }
.anslag-rubrik {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--rover-yellow); margin: 0 0 var(--sp-3);
}
.anslag-rubrik .lucide { flex-shrink: 0; }
.anslag-stack { display: flex; flex-direction: column; gap: var(--sp-2); }
.anslag-item {
  background: var(--white);
  border-radius: var(--r-md);
  border-left: 4px solid var(--scout-blue);
  padding: 10px 14px;
  box-shadow: 0 6px 20px rgba(0, 24, 45, .22);
}
.anslag-huvud { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.anslag-niva { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.anslag-tid { font-size: 12px; color: var(--fg3); font-variant-numeric: tabular-nums; margin-left: auto; }
/* pre-wrap: ett anslag är ofta flera rader, och radbrytningarna bär meningen. */
.anslag-text { font-size: 14.5px; line-height: 1.5; color: var(--fg1); white-space: pre-wrap; word-break: break-word; }
.anslag-info    { border-left-color: var(--scout-blue); }
.anslag-info    .anslag-niva { color: var(--scout-blue); }
.anslag-varning { border-left-color: var(--avent-orange); }
.anslag-varning .anslag-niva { color: var(--avent-orange); }
.anslag-kritisk { border-left-color: var(--utm-pink); }
.anslag-kritisk .anslag-niva { color: var(--utm-pink); }
.anslag-lugn {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 13.5px; color: var(--scout-blue-200);
}
.anslag-lugn .lucide { color: var(--spaer-green); flex-shrink: 0; }

/* Infällningen. --fall ger en liten trappa så stacken läses uppifrån och ner
   i stället för att slå upp på en gång. Bara NYA anslag bär klassen. */
@media (prefers-reduced-motion: no-preference) {
  .anslag-ny { animation: anslag-in .45s var(--ease, cubic-bezier(.22,.61,.36,1)) both; animation-delay: var(--fall, 0ms); }
  @keyframes anslag-in {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Under 900 px finns ingen högerhalva att fälla in i: stacken lägger sig under
   texten och full bredd. En vågrät rörelse på en smal skärm ser dessutom ut
   som att sidan glappar i sidled. */
@media (max-width: 900px) {
  .pub-hero-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  /* order: -1 — stacken läggs FÖRE tävlingsnamnet på smal skärm. Den gamla
     placeringen ovanför hjälten fanns av ett skäl: det ledningen skriver när
     starten är försenad ska vara det första en förälder ser, inte något man
     scrollar fram. På bred skärm står den redan i blickfånget till höger; på
     en telefon måste den flyttas upp för att behålla samma egenskap. */
  .anslag-kol { padding-top: 0; order: -1; }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes anslag-in {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* Följ-länken landar mitt i en lista — en kort markering visar VILKEN rad som
   är din, utan att man behöver leta efter stjärnan. */
@media (prefers-reduced-motion: no-preference) {
  .folj-blink { animation: folj-blink 2.4s ease-out 1; border-radius: var(--r-md); }
  @keyframes folj-blink {
    0%, 60% { background: var(--scout-blue-50); }
    100%    { background: transparent; }
  }
}

/* --- Landningssidan: bevisremsa, funktionslista, demodörrar, kom-igång ------
   Allt nedan använder tokens.css — inga hex-värden, så profilen kan justeras
   på ett ställe. Sidan är produktens enda skyltfönster; den ska tåla att läsas
   på en telefon i en kårlokal lika väl som på en projektor. */

.hero-cta-row {
  display: flex; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap; margin-top: var(--sp-5);
}
.hero-cta-note { color: var(--scout-blue-200); font-size: 14px; }
.btn-gul {
  background: var(--rover-yellow); color: var(--scout-blue-900);
  border: none; font-weight: 700; padding: 12px 22px; font-size: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-md); text-decoration: none;
  transition: transform var(--dur-base) var(--ease), filter var(--dur-base) var(--ease);
}
.btn-gul:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* Bevisremsan ligger direkt under hero och tar tre påståenden som går att
   kontrollera i produkten — inte marknadsföringsord. */
.landing-proof {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-6) 0 var(--sp-7);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-7);
}
.landing-proof-item, .landing-proof-num { display: flex; flex-direction: column; gap: 4px; }
.landing-proof-item strong { color: var(--scout-blue); font-size: 15px; }
.landing-proof-item span { color: var(--fg2); font-size: 14px; line-height: 1.5; }
.landing-proof-num strong {
  font-family: var(--font-display); font-weight: 200; font-size: 40px;
  line-height: 1; color: var(--avent-orange);
}
.landing-proof-num span { color: var(--fg3); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }

/* Funktionslistan. Grupperna staplas i två kolumner på skärm och en på
   telefon; raderna är en definitionslista i formen namn + en mening. */
.landing-funk {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-6) var(--sp-7); margin-bottom: var(--sp-8);
}
.landing-funk-rubrik {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 400; font-size: 20px;
  color: var(--scout-blue); margin: 0 0 var(--sp-3);
}
.landing-funk-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.landing-funk-lista li {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: var(--sp-4); border-left: 2px solid var(--scout-blue-100);
}
.landing-funk-lista strong { font-size: 15px; color: var(--fg); }
.landing-funk-lista span { font-size: 14px; line-height: 1.5; color: var(--fg2); }
.landing-feature-icon-sm { width: 28px; height: 28px; }

/* Demosektionen: en huvuddörr som tar halva bredden, resten som små kort.
   Hierarkin är avsiktlig — sekretariatets vy är det man ska öppna först. */
.landing-demo-lede { color: var(--fg2); max-width: 68ch; margin: 0 0 var(--sp-5); }
.landing-demo {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--sp-4); margin-bottom: var(--sp-8); align-items: start;
}
/* Ingen height:100% — kortet ska hugga sitt innehåll. Med den sträcktes det
   till sidokolumnens höjd och lämnade ett stort tomrum före knapparna. */
.landing-demo-huvud { display: flex; flex-direction: column; margin: 0; }
.landing-demo-sido { display: grid; gap: var(--sp-3); }
.landing-demo-liten { margin: 0; padding: var(--sp-4); text-decoration: none; color: inherit; display: block; }
.landing-demo-liten strong { color: var(--scout-blue); }
.landing-demo-ext { color: var(--fg3); display: inline-flex; margin-left: auto; }

/* Kom igång-stegen. Numren bär information (ordningen ÄR processen), därför
   är de synliga siffror och inte dekoration. */
.landing-steg {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.landing-steg-kort {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
}
.landing-steg-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--scout-blue); color: var(--white);
  font-weight: 700; font-size: 15px; margin-bottom: var(--sp-3);
}
.landing-steg-kort strong { display: block; color: var(--scout-blue); font-size: 16px; }
.landing-kostnad {
  background: var(--scout-blue-50); border: 1px solid var(--scout-blue-100);
  border-radius: var(--r-lg); padding: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.landing-kostnad p { margin: 0; color: var(--fg2); line-height: 1.6; }
/* :not(.btn) — utan den träffade regeln även knappen i samma ruta, och
   scout-blå text på scout-blå botten gjorde etiketten helt osynlig. */
.landing-kostnad a:not(.btn) { color: var(--scout-blue); }

@media (max-width: 720px) {
  .landing-demo { grid-template-columns: 1fr; }
  .landing-proof { padding-top: var(--sp-5); }
}

/* --- Officiella sidornas huvud (publik-nav.js) -----------------------------
   Start, Om, Kontakt och Integritet delar meny, smulor och sidfot. Förut nåddes
   de bara via en rad längst ned på startsidan, och den som klickade in på
   Integritet hamnade i en återvändsgränd utan väg vidare. */
.pub-meny { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.pub-meny a {
  color: var(--scout-blue-200); text-decoration: none;
  font-size: 14px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.pub-meny a:hover { color: var(--white); background: rgba(255, 255, 255, .10); }
.pub-meny a.is-aktiv { color: var(--scout-blue-900); background: var(--rover-yellow); }

/* Smulorna ligger UNDER hjälten, på den vita ytan. I det blå blocket
   konkurrerade de med sidrubriken om samma uppmärksamhet; här läser man dem
   som det de är — en väg tillbaka, inte en rubrik. */
.pub-smulor { background: var(--white); border-bottom: 1px solid var(--border); }
.pub-smulor .page {
  display: flex; align-items: center; gap: 8px;
  padding-top: var(--sp-3); padding-bottom: var(--sp-3);
  font-size: 13px; color: var(--fg2);
}
.pub-smulor a { color: var(--scout-blue); text-decoration: none; font-weight: 600; }
.pub-smulor a:hover { text-decoration: underline; }
.pub-smulor span[aria-hidden] { opacity: .5; }

.pub-foot-lankar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.pub-foot-lankar a { color: var(--scout-blue-300); text-decoration: none; font-size: 14px; }
.pub-foot-lankar a:hover { color: var(--white); text-decoration: underline; }

/* Om-sidan: luftiga avsnitt, och en tydlig markering för det som inte är
   skrivet än — hellre ärligt tomt än utfyllt med floskler. */
.om-sida section { margin-bottom: var(--sp-8); }
.om-sida h2 { color: var(--scout-blue); margin: 0 0 var(--sp-3); }
.om-sida p { line-height: 1.65; color: var(--fg2); margin: 0 0 var(--sp-3); }
.om-sida a { color: var(--scout-blue); }

/* Biografin: porträtt vid sidan av texten, staplat på telefon. */
.om-bio { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.om-portratt {
  margin: 0; position: relative; aspect-ratio: 3 / 4;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--scout-blue-100);
  display: grid; place-items: center;
}
.om-portratt img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Reservläget: initialer i stället för en trasig bildikon när filen saknas. */
.om-portratt-reserv {
  position: absolute; font-family: var(--font-display); font-weight: 200;
  font-size: 52px; color: var(--scout-blue-400); display: none;
}
.om-portratt-tom img { display: none; }
.om-portratt-tom .om-portratt-reserv { display: block; }
.om-namn { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--scout-blue); margin: 0; }
.om-roll { color: var(--fg3) !important; font-size: 14px; margin: 2px 0 var(--sp-4) !important; }

/* Frågan om AI. Sidans enda plats för en glimt i ögat — den ska synas, men
   inte skrika. */
.om-fraga {
  background: var(--scout-blue-50); border: 1px solid var(--scout-blue-100);
  border-radius: var(--r-lg); padding: var(--sp-6);
}
.om-fraga-q { font-weight: 700; color: var(--scout-blue) !important; margin: 0 0 var(--sp-2) !important; }
.om-fraga-a {
  font-family: var(--font-serif, Georgia, serif); font-style: italic;
  font-size: 21px; line-height: 1.45; color: var(--fg1) !important; margin: 0 !important;
}

@media (max-width: 560px) {
  .om-bio { grid-template-columns: 1fr; }
  .om-portratt { max-width: 200px; }
}

@media (max-width: 640px) {
  .pub-meny { gap: 0; }
  .pub-meny a { padding: 6px 9px; font-size: 13px; }
}