/* =====================================================================
   Vildsvinskollen — design system
   Light only. Deep forest green brand, warm orange for sightings.

   Order: tokens and base → shared pieces (buttons, header) → the map page
   (info card, map controls and markers, report form, popups, welcome, receipt)
   → content pages (statistics, about, footer, control panel) → print and
   reduced motion. Each part keeps its own screen-size rules at its end, widest
   first. Breakpoints in use: 1080 (info card's design height), 900/899
   (computers vs. phones and tablets), 860, 761–999, 760, 640 (phones: more
   map), 560, 520, 480, 400, 380, 339; low laptops = min-width 900 and
   max-height 820.
   ===================================================================== */

@font-face {
  font-family: "Inter Var";
  src: url("/fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Neutrals (warm, slightly green) */
  --bg: #f3f4ef;
  --surface: #ffffff;
  --surface-2: #f5f6f2;
  --surface-3: #eaece5;
  --border: rgb(14 32 23 / .09);
  --border-strong: rgb(14 32 23 / .16);
  --ink: #0d1a14;
  --ink-2: #3c4842;
  --ink-3: #69746e;

  /* Brand */
  --brand-950: #082419;
  --brand-900: #0c3324;
  --brand-800: #0f3b2a;
  --brand-700: #17573e;
  --brand-600: #1f7050;
  --brand-200: #c5dccf;
  --brand-100: #dfece4;
  --brand-50: #eef5f1;
  --brand-grad: linear-gradient(180deg, #17573e 0%, #0c3324 100%);

  /* Map markers by age, the same for both kinds: day 1 strong colour and pulsing,
     days 2–3 strong colour, after that grey. Strong vs. grey is easy to tell apart,
     also for colour-blind visitors. The red is dark enough to stand out on the map's
     orange main roads; it is also the site's alert red. */
  --boar: #c4140a;
  --damage: #4a2f1a; /* bökskador: dark soil brown hoofprints */
  --faded: #59636e; /* dark enough to stay visible on the map */

  --alert: #b42318;
  --alert-soft: #fdecea;
  --focus: #2563eb;
  --chart: #17573e;
  --chart-soft: #a9cbb7;
  --grid: #e8ebe4;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgb(13 26 20 / .06);
  --shadow-sm: 0 1px 2px rgb(13 26 20 / .05), 0 2px 8px rgb(13 26 20 / .05);
  --shadow-md: 0 1px 2px rgb(13 26 20 / .05), 0 8px 28px rgb(13 26 20 / .09);
  --shadow-lg: 0 2px 6px rgb(13 26 20 / .06), 0 24px 64px rgb(13 26 20 / .18);
  --glass: rgb(255 255 255 / .78);
  --glass-border: rgb(255 255 255 / .7);
  --glass-blur: blur(22px) saturate(1.7);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-glide: cubic-bezier(.16, 1, .3, 1); /* fast start, long soft stop (panels sliding in) */
  --ease-leave: cubic-bezier(.55, 0, 1, .45); /* quick exit */
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  --font: "Inter Var", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family: var(--font);
  font-feature-settings: "cv11", "ss01", "ss03";
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* The two report icons: the boar (inline SVG) and the hoofprint for damage, drawn as a
   mask so it takes the colour (report form, statistics, control panel) */
.boar-icon { width: 30px; height: 19px; fill: currentColor; flex: none; }
.damage-mark { display: inline-block; flex: none; width: 18px; height: 23px; margin: 0 8px 0 7px; background: var(--damage); -webkit-mask: url(/img/hoof.svg) center / contain no-repeat; mask: url(/img/hoof.svg) center / contain no-repeat; }
.damage-mark.small { width: 12px; height: 15px; margin: 0 2px; }

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop { 50% { transform: scale(1.05); } }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 12px; cursor: pointer; text-decoration: none;
  font-size: 15px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-xs);
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background-color .15s, border-color .15s;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary {
  background: var(--brand-grad); color: #fff; border-color: transparent;
  box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 1px 2px rgb(8 36 25 / .3), 0 6px 16px rgb(8 36 25 / .18);
}
.btn-primary:hover { background: var(--brand-grad); filter: brightness(1.08); }
.btn-lg { height: 52px; padding: 0 24px; font-size: 16px; border-radius: 14px; }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: rgb(14 32 23 / .05); }
.btn .boar-icon { width: 28px; height: 18px; }

.link-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--brand-700);
}
.link-btn svg { width: 16px; height: 16px; }
.link-btn:hover { color: var(--brand-900); text-decoration: underline; text-underline-offset: 3px; }

.sheet-close {
  width: 36px; height: 36px; flex: none; border-radius: 11px; cursor: pointer;
  display: grid; place-items: center;
  border: 0; background: rgb(14 32 23 / .06); color: var(--ink-2); font-size: 15px;
  transition: background-color .15s;
}
.sheet-close:hover { background: rgb(14 32 23 / .11); }

/* ---------------------------------------------------------------------
   Header & navigation. On the map page the header floats over the map
   as two glass pills.
   --------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 16px;
  height: 68px; padding: 0 max(16px, calc((100% - 1160px) / 2));
  background: rgb(243 244 239 / .82);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border);
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.brand img { width: 38px; height: 38px; flex: none; border-radius: 11px; box-shadow: 0 1px 2px rgb(8 36 25 / .25), 0 4px 12px rgb(8 36 25 / .16); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.brand-region { font-size: 12.5px; color: var(--ink-3); font-weight: 500; white-space: nowrap; }

.site-nav {
  margin-left: auto; display: flex; gap: 2px; padding: 4px;
  background: rgb(14 32 23 / .05); border-radius: 999px;
}
.site-nav a {
  text-decoration: none; font-size: 14.5px; font-weight: 550; color: var(--ink-2);
  padding: 7px 15px; border-radius: 999px; transition: background-color .15s, color .15s;
}
.site-nav a:hover { color: var(--ink); background: rgb(255 255 255 / .6); }
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); }
/* "Mer": on narrow screens Vad vi vill, Nyheter and Om fold into a small menu (no JS needed;
   shared.js closes it on a tap outside) */
.nav-more { display: none; position: relative; }
.nav-more summary {
  display: flex; align-items: center; gap: 5px; list-style: none; cursor: pointer;
  font-size: 14.5px; font-weight: 550; color: var(--ink-2);
  padding: 7px 13px 7px 15px; border-radius: 999px; transition: background-color .15s, color .15s;
}
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg); transition: transform .2s var(--ease-out);
}
.nav-more[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.nav-more summary:hover { color: var(--ink); background: rgb(255 255 255 / .6); }
.nav-more .more-icon { display: none; width: 20px; height: 20px; }
.nav-more:has([aria-current]) summary { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); }
.nav-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 10; display: grid; gap: 2px; min-width: 190px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-md);
  animation: fade-up .18s var(--ease-out);
}
.site-nav .nav-menu a { padding: 11px 14px; border-radius: 11px; font-size: 15px; box-shadow: none; }
.site-nav .nav-menu a[aria-current="page"] { background: var(--brand-50); color: var(--brand-800); }

.map-page .site-header {
  position: absolute; inset: 0 0 auto; height: auto; padding: 14px 16px;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0;
  pointer-events: none;
}
.map-page .site-header > * { pointer-events: auto; }
.map-page .brand, .map-page .site-nav {
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-md);
}
.map-page .brand { padding: 6px 14px 6px 6px; border-radius: 16px; }
.map-page .brand img { width: 36px; height: 36px; border-radius: 10px; }

@media (max-width: 640px) {
  .map-page .site-header { padding: 10px; }
  .map-page .brand { padding: 5px 12px 5px 5px; }
}
@media (max-width: 720px) {
  .site-nav .nav-wide { display: none; }
  .nav-more { display: block; }
}
@media (max-width: 480px) {
  .site-nav a { padding: 7px 11px; font-size: 14px; }
  /* Phones: "Mer" becomes a menu icon so the site name keeps its room */
  .nav-more summary { padding: 6px 10px; }
  .nav-more .more-text, .nav-more summary::after { display: none; }
  .nav-more .more-icon { display: block; }
  .brand-region { display: none; }
}
/* Small phones (e.g. 360 px Android): keep "Vildsvinskollen" and the menu side by side */
@media (max-width: 400px) {
  .brand { gap: 8px; }
  .brand-name { font-size: 14.5px; white-space: nowrap; }
  .brand img, .map-page .brand img { width: 32px; height: 32px; border-radius: 9px; }
  .map-page .brand { padding: 4px 12px 4px 4px; }
  .site-nav a { padding: 6px 7px; font-size: 13.5px; }
  .nav-more summary { padding: 6px 8px; }
}
/* Narrow phones (340–374 px): a little less air so the name still fits beside the menu */
@media (max-width: 374px) {
  .site-header, .map-page .site-header { gap: 8px; }
  .site-nav { gap: 0; padding: 3px; }
  .site-nav a { padding: 6px 6px; }
  .nav-more summary { padding: 6px 7px; }
  .map-page .brand { padding-right: 9px; }
}
/* Tiny screens (320 px): the logo alone, the name would not fit beside the menu */
@media (max-width: 339px) {
  .brand-text { display: none; }
  .map-page .brand { padding: 4px; }
}

/* ---------------------------------------------------------------------
   Map page
   --------------------------------------------------------------------- */
.map-page { height: 100dvh; overflow: hidden; }
.map-wrap { position: absolute; inset: 0; }
#map { position: absolute; inset: 0; background: #eef0ea; }

.panel {
  position: absolute; z-index: 500;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------------------
   Info card (map panel). One type scale (20 / 16 / 14 / 12.5 px), weights 450 / 600,
   dark text only (no faint grey for content). A header that says the numbers are for
   the area on screen, then a white card per kind of report with its switch, its numbers
   and an unfoldable key.
   --------------------------------------------------------------------- */
.view-panel {
  top: 84px; left: 16px; width: 380px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100% - 84px - 104px); overflow-y: auto; overscroll-behavior: contain;
}
.vp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 0; }
.vp-scope { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.vp-scope svg { flex: none; width: 18px; height: 18px; color: var(--brand-700); }
.vp-toggle {
  display: none; flex: none; align-items: center; gap: 4px; margin: -4px -4px -4px 0; padding: 4px 6px; border: 0; border-radius: 8px;
  background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.vp-toggle svg { width: 16px; height: 16px; transition: transform .2s var(--ease-out); }
.vp-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.vp-toggle:hover { color: var(--ink); background: rgb(14 32 23 / .05); }
.vp-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Phones only: the card folded to one slim row (see the 640 px rules below) */
.vp-mini { display: none; }

.segmented { display: flex; padding: 3px; gap: 2px; background: rgb(14 32 23 / .06); border-radius: 12px; }
.segmented button {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  padding: 7px 8px; border-radius: 9px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2);
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.layers { display: grid; gap: 8px; }
.layer { --c: var(--boar); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-xs); }
.layer[data-layer="damage"] { --c: var(--damage); }
.layer-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.layer-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--c) 9%, var(--surface)); color: var(--c); }
.layer-icon svg { display: block; width: 22px; height: 14px; }
.layer[data-layer="damage"] .layer-icon svg { width: 14px; height: 18px; }
.layer-name { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }

/* The numbers: the map's window, then a longer period of the visitor's choice */
.layer-stats { display: grid; margin: 6px 0 0; }
.stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; }
.stat + .stat { border-top: 1px solid var(--border); }
.stat dt { font-size: 14px; font-weight: 600; color: var(--ink); }
.stat dd { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.period-select {
  appearance: none; -webkit-appearance: none; max-width: 100%; cursor: pointer;
  padding: 6px 32px 6px 10px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1a14' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 16px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
}
.period-select:hover { border-color: var(--brand-600); }
.period-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.layer-icon, .layer-name, .layer-stats { transition: opacity .2s ease; }
.layer.off .layer-icon, .layer.off .layer-name, .layer.off .layer-stats { opacity: .38; }
.layer.off .layer-key { display: none; }

/* On/off switch */
.switch {
  position: relative; flex: none; width: 40px; height: 24px; padding: 0; border: 0; border-radius: 999px;
  background: rgb(14 32 23 / .16); cursor: pointer; transition: background-color .2s ease;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s var(--ease-out);
}
.switch[aria-checked="true"] { background: var(--brand-700); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The key: what the symbols mean and how long they stay */
.layer-key { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.key-label { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.key-count, .key-age { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.key-count { margin-bottom: 8px; }
.key-count li, .key-age li {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 4px; border-radius: 10px; background: var(--surface-2);
  font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
}
.key-count i { display: block; color: var(--boar); }
.key-count svg { display: block; }
.age-icon { position: relative; display: grid; place-items: center; height: 20px; color: var(--c); }
.age-icon.old { color: var(--faded); }
.age-icon svg { position: relative; display: block; width: 25px; height: 16px; }
.layer[data-layer="damage"] .age-icon svg { width: 16px; height: 20px; }
.age-icon .pulse { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--c); opacity: .45; animation: pulse 2.4s var(--ease-out) infinite; }

/* Heatmap view: the colour scale instead of the keys */
.heat-ramp { display: none; align-items: center; gap: 8px; margin: 0; padding: 0 4px; font-size: 12.5px; color: var(--ink-2); }
.heat-ramp i { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #fde7c8, #f6a04d, #d9481c, #8f1d12); }
.view-panel[data-mode="heat"] .heat-ramp { display: flex; }

/* Heatmap view: the kommuner on screen, each linking to its statistics page */
.heat-top { display: none; }
.view-panel[data-mode="heat"] .heat-top { display: block; padding: 2px 0 0; }
.ht-label { margin: 0 4px 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.ht-label span { margin-left: 4px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.ht-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ht-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-xs); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.ht-row:hover { border-color: var(--brand-200); background: var(--brand-50); }
.ht-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ht-text { display: grid; flex: 1; min-width: 0; }
.ht-text b { font-size: 14px; font-weight: 600; color: var(--ink); }
.ht-text small { font-size: 12.5px; color: var(--ink-2); }
.ht-go { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: 13px; font-weight: 600; color: var(--brand-700); }
.ht-go svg { width: 16px; height: 16px; transition: transform .15s var(--ease-out); }
.ht-row:hover .ht-go svg { transform: translateX(2px); }
.ht-empty { margin: 0 4px; font-size: 14px; color: var(--ink-2); }
.view-panel[data-mode="heat"] .layer-key { display: none; }
/* The heatmap shows the chosen period, so the "Senaste veckan" row is left out there */
.view-panel[data-mode="heat"] .stat:first-child { display: none; }
.view-panel[data-mode="heat"] .stat + .stat { border-top: 0; }

.vp-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--brand-50); font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* Key actions: icon tiles */
.panel-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.action {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  padding: 10px 6px 9px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  box-shadow: var(--shadow-xs); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--ink); text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.action:hover { border-color: var(--brand-200); background: var(--brand-50); }
.action:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.action-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--brand-50); color: var(--brand-700); }
.action:hover .action-icon { background: var(--surface); }
.action-icon svg { width: 18px; height: 18px; }

/* Wide screens: the report button sits clear of the panel, so the panel may reach the bottom */
@media (min-width: 1080px) {
  /* One design height for the info card (its natural size); lower windows shrink it.
     The form takes the same size when it opens. The actions sit at the bottom. */
  .view-panel { height: min(700px, calc(100% - 100px)); max-height: none; }
  .panel-actions { margin-top: auto; }
}
/* Phones: the info panel steps aside while a map popup is open */
@media (max-width: 899px) {
  body.popup-open .view-panel { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s; }
}
/* Phones: more map (2026-10-05, Tomas: the windows covered most of the screen). The card
   starts folded to one slim row (both numbers + a chevron); tapping it opens the card.
   Open, the keys still fold away with "Förklaring". */
@media (max-width: 640px) {
  .view-panel { top: 66px; left: 10px; right: 10px; width: auto; padding: 10px; gap: 10px; max-height: calc(100% - 66px - 150px); }
  .layer { padding: 10px; }
  .layer-head { gap: 10px; }
  .vp-scope { font-size: 13px; }
  .stat { min-height: 34px; }
  .period-select { padding-block: 4px; }
  .vp-toggle { display: inline-flex; }
  /* Folded: the switches, numbers and actions; the keys unfold with "Förklaring" */
  .view-panel.folded .layer-key, .view-panel.folded .heat-top { display: none; }
  .action { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 8px 8px; text-align: left; font-size: 12px; line-height: 1.2; }
  .action-icon { flex: none; width: 26px; height: 26px; }
  .action-icon svg { width: 15px; height: 15px; }

  .vp-mini {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 40px; margin: 0; padding: 2px 4px 2px 8px;
    border: 0; border-radius: 12px; background: none; font: inherit; color: var(--ink); cursor: pointer; text-align: left;
  }
  .vp-mini:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .mini-num { display: inline-flex; align-items: center; gap: 7px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .mini-num svg { width: 26px; height: 17px; color: var(--boar); }
  .mini-num[data-mini="damage"] svg { width: 13px; height: 17px; color: var(--damage); }
  .mini-num.off { opacity: .35; }
  .mini-label { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mini-chev { flex: none; width: 20px; height: 20px; color: var(--ink-2); transition: transform .2s var(--ease-out); }
  .vp-mini[aria-expanded="true"] .mini-chev { transform: rotate(180deg); }
  .view-panel.collapsed { padding: 6px; }
  .view-panel.collapsed > :not(.vp-mini) { display: none; }
}
/* Narrow phones: key icons above their labels, so the labels get the full width */
@media (max-width: 380px) {
  .key-count li, .key-age li { flex-direction: column; gap: 3px; }
}
/* Low laptop screens (768 px and so on): a little less air, so the card fits without scrolling */
@media (min-width: 900px) and (max-height: 820px) {
  .view-panel { gap: 8px; padding: 10px; }
  .layer { padding: 10px 12px; }
  .stat { min-height: 34px; }
  .layer-key { margin-top: 6px; padding-top: 8px; }
  .key-count li, .key-age li { padding: 5px 4px; }
}

/* ---------------------------------------------------------------------
   Map controls, report button, the placing pin and the markers
   --------------------------------------------------------------------- */
.map-buttons { position: absolute; z-index: 500; right: 16px; bottom: 148px; display: flex; flex-direction: column; gap: 8px; }
.icon-btn, .leaflet-bar a {
  width: 44px !important; height: 44px !important; border-radius: 14px !important; cursor: pointer;
  display: grid !important; place-items: center;
  background: var(--glass) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important; box-shadow: var(--shadow-md);
  color: var(--ink) !important; font: 500 20px/1 var(--font) !important;
  transition: transform .15s var(--ease-out);
}
.icon-btn:active, .leaflet-bar a:active { transform: scale(.95); }
.icon-btn svg { width: 21px; height: 21px; }
.leaflet-bar { border: 0 !important; box-shadow: none !important; display: flex; flex-direction: column; gap: 8px; }
.leaflet-touch .leaflet-bar a:first-child, .leaflet-touch .leaflet-bar a:last-child { border-radius: 14px !important; }
.leaflet-bottom.leaflet-right .leaflet-control-zoom { margin: 0 16px 32px 0; }

.leaflet-control-attribution {
  font-size: 10.5px; background: rgb(255 255 255 / .7) !important; backdrop-filter: blur(8px);
  border-radius: 8px 0 0 0; color: var(--ink-3);
}
.leaflet-control-attribution a { color: var(--ink-2); }
/* The report form covers the bottom of the map; the map credits would sit on top of
   its last line, so they step aside while the form is open. */
body.reporting .leaflet-control-attribution, body:has(.receipt:not([hidden])) .leaflet-control-attribution { display: none; }

/* "Nytt" strip: the newest news post, on the map until read or closed (js/map/news.js).
   Computers: at the top, right of the info card. Phones: below the folded info card,
   which covers it when opened. Gone while reporting, on the receipt and with a popup. */
.news-strip {
  position: absolute; z-index: 450; top: 84px; left: 412px; right: 16px; margin-inline: auto;
  display: flex; align-items: center; width: fit-content; max-width: min(520px, calc(100% - 428px));
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: var(--shadow-md);
  animation: fade-up .4s var(--ease-out) .6s both;
}
.news-strip[hidden], body.reporting .news-strip, body:has(.receipt:not([hidden])) .news-strip, body.popup-open .news-strip { display: none; }
.news-link { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 4px 9px 9px; color: var(--ink); text-decoration: none; }
.news-badge { flex: none; padding: 3px 8px; border-radius: 7px; background: var(--brand-700); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.news-title { min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.news-chev { flex: none; width: 18px; height: 18px; color: var(--ink-2); transition: transform .2s var(--ease-out); }
.news-link:hover .news-chev { transform: translateX(2px); }
.news-close { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-right: 5px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.news-close:hover { background: rgb(14 32 23 / .07); color: var(--ink); }
@media (max-width: 640px) {
  .news-strip { top: 128px; bottom: auto; left: 10px; right: 10px; max-width: none; width: auto; }
  .news-link { flex: 1; }
  .news-title { font-size: 14px; }
}

/* Report button: full text where there is room, short on phones */
.report-fab {
  position: absolute; z-index: 600; left: 50%; bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px));
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 28px 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--brand-grad); color: #fff;
  font-size: 17px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 1px 0 rgb(255 255 255 / .14) inset, 0 2px 4px rgb(8 36 25 / .25), 0 14px 36px rgb(8 36 25 / .35);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.report-fab .boar-icon { width: 40px; height: 26px; transition: transform .3s var(--ease-spring); }
.report-fab:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 1px 0 rgb(255 255 255 / .14) inset, 0 4px 8px rgb(8 36 25 / .25), 0 18px 44px rgb(8 36 25 / .4); }
.report-fab:hover .boar-icon { transform: translateX(2px); }
.report-fab:active { transform: translateX(-50%) scale(.97); }
.fab-short { display: none; }
body.reporting .report-fab, body.reporting .map-buttons,
body.reporting .leaflet-control-zoom { display: none; }

/* Crosshair pin while placing a report */
.crosshair {
  display: none; position: absolute; z-index: 550; left: 50%; top: 50%;
  width: 46px; height: 58px; margin: -57px 0 0 -23px; pointer-events: none;
  filter: drop-shadow(0 6px 10px rgb(8 36 25 / .35));
  transform-origin: 50% 100%; /* the tip: growing or settling never moves it */
  transition: transform .18s var(--ease-out);
}
.crosshair::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 12px; height: 5px; margin-left: -6px;
  border-radius: 50%; background: rgb(8 36 25 / .35);
  transition: transform .18s var(--ease-out), opacity .18s;
}
body.reporting .crosshair { display: block; animation: pin-drop .45s var(--ease-out) both; }
/* While the map is dragged the pin grows a little from its tip; the tip stays on the spot */
body.reporting .crosshair.lifted { animation: none; transform: scale(1.1); }
body.reporting .crosshair.lifted::after { transform: scale(.6); opacity: .5; }
body.reporting .crosshair.landed { animation: pin-land .42s var(--ease-out); }
@keyframes pin-drop { 0% { transform: translateY(-40px); opacity: 0; } 60% { transform: translateY(3px); opacity: 1; } 100% { transform: none; } }
/* Landing: a small squash and spring back (anchored at the tip) and a ripple on the ground */
@keyframes pin-land {
  0% { transform: scale(1.1); }
  40% { transform: scale(1.08, .88); }
  70% { transform: scale(.97, 1.04); }
  100% { transform: none; }
}
.pin-ripple {
  display: none; position: absolute; z-index: 549; left: 50%; top: 50%; width: 52px; height: 18px; margin: -9px 0 0 -26px;
  border: 2.5px solid var(--brand-600); border-radius: 50%; opacity: 0; pointer-events: none;
}
body.reporting .pin-ripple { display: block; }
.pin-ripple.go { animation: pin-ripple .6s var(--ease-out); }
@keyframes pin-ripple { 0% { transform: scale(.25); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

/* Markers: seen boars as one boar or a small herd, damage as dark soil-brown hoofprints
   (no edge; the dark brown stands out on the light map by itself). Red/brown or grey by
   age; reports from the last day pulse softly. */
@keyframes pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.8); opacity: 0; } }
.boar-marker, .damage-marker { background: none; border: 0; }
.boar-marker svg { display: block; width: 100%; height: 100%; overflow: visible; }
.damage-marker { color: var(--damage); }
.damage-marker svg { display: block; width: 100%; height: 100%; }
.boar-marker .pulse, .damage-marker .pulse { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; margin: -35% 0 0 -35%; border-radius: 50%; background: var(--boar); opacity: .45; animation: pulse 2.4s var(--ease-out) infinite; pointer-events: none; }
/* The hoofprint is narrower than a boar; its pulse starts as large as a lone boar's (70 % of 25 px)
   and a little stronger (dark brown fades faster on the light map than red) */
.damage-marker .pulse { width: 18px; margin: -9px 0 0 -9px; animation-name: pulse-strong; }
@keyframes pulse-strong { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.8); opacity: 0; } }

@media (max-width: 640px) { .leaflet-control-zoom { display: none; } .map-buttons { right: 12px; bottom: 112px; } }
@media (max-width: 520px) { .fab-long { display: none; } .fab-short { display: inline; } }

/* ---------------------------------------------------------------------
   Report form. Its size never changes by itself while it is open: the content scrolls
   inside, so the map and the pin never have to move. Computers: a panel on the left,
   the info card's size, with the pin in the middle of the map. Phones and tablets: a
   bottom sheet that follows the steps Välj → Placera → Skicka.
   --------------------------------------------------------------------- */
.sheet {
  position: absolute; z-index: 700; top: 84px; bottom: 16px; left: 16px; width: 380px;
  display: flex; flex-direction: column;
  transform: translateX(calc(-100% - 40px));
  transition: transform .4s var(--ease-out);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
body.reporting .sheet { transform: none; }
.sheet-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 4px; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 16px; }
.sheet-foot { padding: 12px 20px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.sheet:not([data-kind]) .sheet-foot { border-top: 0; }
.sheet h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.025em; }
.sheet-hint { margin: 3px 0 0; font-size: 14px; color: var(--ink-2); }
.sheet-close { margin-left: auto; }
.sheet-head > div { flex: 1; min-width: 0; }
.hint-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-top: 3px; }
.hint-row .sheet-hint { margin: 0; }
.use-pos {
  display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 3px 8px 3px 6px;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--brand-700); cursor: pointer;
}
.use-pos svg { width: 15px; height: 15px; }
.use-pos:hover { border-color: var(--brand-600); background: var(--brand-50); }
.use-pos:disabled { opacity: .6; cursor: progress; }
.sheet:not([data-kind]) .use-pos { display: none; }

/* Reporting paused by the owner: notice at the top of the form; the choices and
   questions are dimmed and can't be used */
.sheet-paused { margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: #fff6e0; border: 1px solid #f0d58c; color: #6b4e00; font-size: 14.5px; line-height: 1.45; }
.sheet.paused .kind-choice, .sheet.paused .q { opacity: .45; pointer-events: none; }
.sheet.paused .submit-btn:disabled { opacity: .5; cursor: not-allowed; }

/* "Jag såg vildsvin / Jag hittade bökskador" */
.kind-choice { border: 0; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kind-option { position: relative; display: block; }
.kind-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kind-option > span {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  height: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 14px;
  border: 1.5px solid var(--border); background: var(--surface); transition: border-color .15s ease, background .15s ease;
}
.kind-option .boar-icon, .kind-option .hoof-icon { grid-row: 1 / 3; }
.kind-option .boar-icon { width: 34px; height: 22px; color: var(--boar); }
.kind-option .hoof-icon { grid-row: 1 / 3; width: 18px; height: 23px; margin: 0 8px 0 7px; color: var(--damage); }
.kind-option b { font-size: 14.5px; line-height: 1.25; }
.kind-option small { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
.kind-option input:checked + span { border-color: var(--brand-800); background: color-mix(in srgb, var(--brand-800) 7%, var(--surface)); box-shadow: inset 0 0 0 1px var(--brand-800); }
.kind-option input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.kind-sighting { --c: var(--boar); }
.kind-damage { --c: var(--damage); }
.sheet:not([data-kind="sighting"]) [data-for="sighting"],
.sheet:not([data-kind="damage"]) [data-for="damage"],
.sheet:not([data-kind]) .submit-btn { display: none; }

/* After choosing a kind, the two big choices become a compact switch */
.sheet[data-kind] .kind-choice { gap: 4px; padding: 3px; border-radius: 12px; background: rgb(14 32 23 / .06); }
.sheet[data-kind] .kind-option > span {
  display: flex; justify-content: center; gap: 8px; min-height: 40px; padding: 6px 8px;
  border: 0; border-radius: 9px; background: transparent; box-shadow: none;
}
.kind-short { display: none; }
.sheet[data-kind] .kind-option small, .sheet[data-kind] .kind-option b { display: none; }
.sheet[data-kind] .kind-short { display: inline; font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.sheet[data-kind] .kind-option input:checked + span .kind-short { color: var(--ink); }
.sheet[data-kind] .kind-option b { font-size: 14px; color: var(--ink-2); }
.sheet[data-kind] .kind-option .boar-icon { width: 24px; height: 15px; }
.sheet[data-kind] .kind-option .hoof-icon { width: 13px; height: 16px; margin: 0; }
.sheet[data-kind] .kind-option input:checked + span { background: var(--surface); box-shadow: var(--shadow-sm); }
.sheet[data-kind] .kind-option input:checked + span b { color: var(--ink); }

/* First step (nothing chosen yet): two icon cards, a step indicator, what has been reported
   in the area on screen, and three promises. Once a kind is chosen the cards shrink to the
   compact "Vildsvin | Bökskador" switch and the rest goes away. */
.sheet:not([data-kind]) .kind-choice { grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet:not([data-kind]) .kind-option > span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  min-height: 158px; padding: 16px 10px 14px; border-radius: 20px; border: 1.5px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, var(--surface)) 0%, var(--surface) 70%);
  box-shadow: var(--shadow-xs);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s ease;
}
.sheet:not([data-kind]) .kind-option .boar-icon,
.sheet:not([data-kind]) .kind-option .hoof-icon {
  box-sizing: border-box; width: 68px; height: 68px; margin: 0 0 8px; border-radius: 20px;
  background: color-mix(in srgb, var(--c) 11%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 16%, transparent);
  color: var(--c); transition: transform .25s var(--ease-out);
}
.sheet:not([data-kind]) .kind-option .boar-icon { padding: 19px 12px; }
.sheet:not([data-kind]) .kind-option .hoof-icon { padding: 17px 20px; }
.sheet:not([data-kind]) .kind-option b { font-size: 16px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
.sheet:not([data-kind]) .kind-option small { font-size: 13px; color: var(--ink-2); }
.sheet:not([data-kind]) .kind-option:hover > span {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, var(--border));
  box-shadow: 0 2px 4px rgb(8 20 14 / .06), 0 14px 30px rgb(8 20 14 / .12);
}
.sheet:not([data-kind]) .kind-option:hover .boar-icon, .sheet:not([data-kind]) .kind-option:hover .hoof-icon { transform: scale(1.07); }
.sheet:not([data-kind]) .sheet-head h2 { font-size: 24px; }

.sheet[data-kind] .report-intro { display: none; }
.report-intro { display: grid; gap: 14px; margin-top: 16px; }

/* How it works: three steps on a line, the first one lit ("you are here") */
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0 16px; padding: 0; list-style: none; text-align: center; }
.sheet[data-kind] .stepper { display: none; }
/* Step 1 explains itself with the steps; the "drag the map" hint belongs to step 2 */
.sheet:not([data-kind]) .sheet-hint { display: none; }
.stepper li { position: relative; display: grid; justify-items: center; gap: 2px; }
.stepper li + li::before {
  content: ""; position: absolute; top: 20px; right: calc(50% + 26px); left: calc(-50% + 26px);
  border-top: 2px dashed var(--brand-200);
}
.st-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 12px; background: var(--brand-50); color: var(--brand-700); box-shadow: inset 0 0 0 1.5px var(--brand-200); }
.st-icon svg { width: 20px; height: 20px; }
.stepper .now .st-icon { background: var(--brand-700); color: #fff; box-shadow: 0 4px 12px rgb(23 87 62 / .3); }
.stepper b { font-size: 14px; font-weight: 700; color: var(--ink); }
.stepper small { font-size: 12.5px; color: var(--ink-2); }

/* What has been reported in the area on screen */
.report-area { padding: 14px 16px; border-radius: 16px; background: var(--surface-2); }
.area-label { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.area-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.area-nums p { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; justify-content: start; margin: 0; }
.area-nums svg { grid-row: 1; }
.area-boar { width: 28px; height: 18px; color: var(--boar); }
.area-hoof { width: 16px; height: 20px; margin: 0 6px; color: var(--damage); }
.area-nums b { grid-row: 1; font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.area-nums span { grid-column: 1 / -1; margin-top: 4px; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.area-empty { margin: 0; font-size: 14px; font-weight: 600; color: var(--brand-800); }

/* Three promises */
.trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.trust li {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 8px; border-radius: 999px;
  background: var(--brand-50); font-size: 12.5px; font-weight: 600; color: var(--brand-800);
}
.trust svg { width: 14px; height: 14px; }

/* The questions: plain sentences, answers as picture tiles. Chosen = green with a check
   mark and a small pop. */
.q { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.q legend { margin: 0 0 8px; padding: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.q-hint { margin-left: 6px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.opts { display: grid; gap: 8px; }
.opts-2 { grid-template-columns: repeat(2, 1fr); }
.opts-3 { grid-template-columns: repeat(3, 1fr); }
.opts-4 { grid-template-columns: repeat(4, 1fr); }
.opt { position: relative; display: block; min-width: 0; }
.opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opt > span {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  height: 100%; min-height: 70px; padding: 8px 4px; box-sizing: border-box; border-radius: 14px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--ink-2); text-align: center;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.opt svg { flex: none; width: 26px; height: 26px; }
.opt svg.size-icon { width: 40px; height: 28px; }  /* damage size seen from above, growing */
.opt .herd-icon { display: grid; place-items: center; height: 26px; color: var(--boar); }
.opt .herd-icon svg { width: auto; height: auto; }
.opt b { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.opt small { margin-top: -3px; font-size: 12px; color: var(--ink-3); }
.opt:hover > span { border-color: var(--brand-200); background: var(--brand-50); }
.opt input:checked + span {
  border-color: var(--brand-700); background: var(--brand-50); color: var(--brand-700);
  box-shadow: inset 0 0 0 1px var(--brand-700); animation: pop .28s var(--ease-out);
}
.opt input:checked + span .herd-icon { color: var(--brand-700); }
.opt input:checked + span::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 5px;
  background: var(--brand-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Damage place: icon beside the label */
.opts-2 .opt > span { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 58px; padding: 10px 12px; text-align: left; }
/* Damage size: three growing squares */
/* Damage age: once "Äldre" is chosen, its tile says where the report goes (the
   statistics; older damage is not shown on the map) */
.age-where, .opt input:checked + span .age-look { display: none; }
.opt input:checked + span .age-where { display: block; }

/* "Med kultingar": a row with a switch */
.toggle-row {
  position: relative; display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 7px 12px;
  border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer;
}
.toggle-row input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.toggle-icon { flex: none; width: 26px; height: 17px; color: var(--boar); transform: scale(.8); }
.toggle-text { display: grid; flex: 1; }
.toggle-text b { font-size: 14px; font-weight: 600; color: var(--ink); }
.toggle-text small { font-size: 12.5px; color: var(--ink-3); }
.toggle-ui { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: rgb(14 32 23 / .16); transition: background-color .2s ease; }
.toggle-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s var(--ease-out); }
.toggle-row input:checked ~ .toggle-ui { background: var(--brand-700); }
.toggle-row input:checked ~ .toggle-ui::after { transform: translateX(16px); }
.toggle-row:has(input:checked) { border-color: var(--brand-700); background: var(--brand-50); }
.toggle-row input:focus-visible ~ .toggle-ui { outline: 2px solid var(--focus); outline-offset: 2px; }

/* "När var det?": a segmented control; Tidigare adds I dag / I går and the phone's time wheel */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 12px; background: rgb(14 32 23 / .06); }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; height: 100%; min-height: 38px; padding: 4px; box-sizing: border-box; border-radius: 9px; font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--ink-2); transition: background-color .15s, color .15s, box-shadow .15s; }
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.when-pick { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
.when-pick[hidden] { display: none; }
.time-field input {
  box-sizing: border-box; height: 44px; min-width: 112px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--surface); font: inherit; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink);
}
.time-field input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.when-error { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--alert); }

/* The same damage reported twice: "Samma skador?" */
.dup-box { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #fbf4ea; border: 1px solid #e6cfae; font-size: 14.5px; line-height: 1.45; }
.dup-box p { margin: 0 0 10px; }
.dup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* "Nålen står i vatten." above the send button; sending waits until the pin is on land */
.water-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 10px 12px; border-radius: 14px; background: #e8f1fb; box-shadow: inset 0 0 0 1px #bcd5ef; }
.water-box p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; font-weight: 600; color: #1d4f86; }
.water-box svg { flex: none; width: 20px; height: 20px; }
.water-box .btn { flex: none; height: 36px; }
.water-box.flash { animation: water-flash .9s ease-in-out 2; }
@keyframes water-flash {
  0%, 100% { background: #e8f1fb; box-shadow: inset 0 0 0 1px #bcd5ef; }
  50% { background: #b9d6f5; box-shadow: inset 0 0 0 2px #2f72c4, 0 0 0 4px rgb(47 114 196 / .18); }
}

/* The send button: dimmed until the questions that need an answer have one (number of
   boars; damage place, size and age), while the pin is in water and while the time is wrong */
.submit-btn svg { width: 20px; height: 20px; transition: transform .2s var(--ease-out); }
.submit-btn:hover svg { transform: translateX(3px); }
.sheet[data-kind="sighting"]:not(:has([name="count"]:checked)) #report-submit,
.sheet[data-kind="damage"]:not(:has([name="damagePlace"]:checked)) #report-submit,
.sheet[data-kind="damage"]:not(:has([name="damageSize"]:checked)) #report-submit,
.sheet[data-kind="damage"]:not(:has([name="damageAge"]:checked)) #report-submit { filter: saturate(.3); opacity: .55; box-shadow: none; }
.sheet.in-water .submit-btn { filter: saturate(.3); opacity: .55; box-shadow: none; }
.sheet.time-bad #report-submit { filter: saturate(.3); opacity: .55; box-shadow: none; }
.submit-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 54px; margin: 0; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--brand-grad); color: #fff; font-size: 16.5px; font-weight: 650; letter-spacing: -.01em;
  box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 6px 18px rgb(8 36 25 / .25);
  transition: transform .15s var(--ease-out), filter .15s;
}
.submit-btn:hover { filter: brightness(1.08); }
.submit-btn:active { transform: scale(.985); }
.submit-btn:disabled { opacity: .6; cursor: progress; }
.emergency { margin: 12px 0 0; text-align: center; color: var(--ink-3); font-size: 13px; }
.emergency strong { color: var(--alert); }
#turnstile:empty { display: none; }
#turnstile { margin-top: 12px; }
/* Phones only: the "Placera" step's button and the "Platsen är vald · Ändra plats" row.
   (After .submit-btn: "Fortsätt" is one too.) */
.place-row, .place-next { display: none; }

/* Computers: the form has the info card's height; spread the first step over it. The
   damage questions (three rows of tiles) sit a little closer, so they fit too. */
@media (min-width: 900px) {
  .sheet:not([data-kind]) .sheet-body { display: flex; flex-direction: column; }
  .sheet:not([data-kind]) .report-intro { flex: 1; align-content: space-evenly; }
  .sheet[data-kind="damage"] .q { margin-top: 12px; }
  .sheet[data-kind="damage"] .q legend { margin-bottom: 6px; }
  .sheet[data-kind="damage"] .opts-2 .opt > span { min-height: 48px; padding: 7px 10px; }
  .sheet[data-kind="damage"] .opts-3 .opt > span { min-height: 0; padding: 6px 4px; gap: 3px; }
}
/* Phones and tablets: a bottom sheet following its steps Välj → Placera → Skicka:
   choose = only as tall as the two choices, place = a thin bar (title, hint, "Fortsätt")
   so most of the map is free, details = the questions, up to ¾ of the map.
   The pin stays at one height the whole time (pinPoint() in js/map/report.js), so nothing jumps;
   the sheet's height glides between the steps (set by sizeSheet() in js/map/report.js). */
@media (max-width: 899px) {
  .sheet {
    top: auto; bottom: 0; left: 0; right: 0; width: min(560px, 100%); height: 50%; margin: 0 auto;
    transform: translateY(calc(100% + 40px));
    border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0;
    transition: transform .4s var(--ease-out), height .35s var(--ease-glide);
  }
  .sheet-head { padding-top: 22px; }
  /* Keep the first step short */
  .stepper small { display: none; }
  .st-icon { width: 34px; height: 34px; border-radius: 10px; }
  .stepper li + li::before { top: 17px; }
  .report-area { display: none; }
  .sheet:not([data-kind]) .kind-option .boar-icon, .sheet:not([data-kind]) .kind-option .hoof-icon { width: 56px; height: 56px; margin-bottom: 4px; }
  .sheet:not([data-kind]) .kind-option .boar-icon { padding: 16px 10px; }
  .sheet:not([data-kind]) .kind-option .hoof-icon { padding: 14px 17px; }

  .sheet[data-stage="place"] .sheet-body,
  .sheet[data-stage="place"] .emergency,
  .sheet[data-stage="place"] #report-submit { display: none; }
  .sheet[data-stage="place"] .place-next { display: flex; }
  .sheet[data-stage="place"] .sheet-foot { border-top: 0; padding-top: 10px; }
  .sheet[data-stage="place"].in-water .place-next { display: none; }
  .sheet[data-stage="details"] .hint-row { display: none; }
  .sheet[data-stage="details"] .sheet-head { padding-bottom: 0; }
  .sheet[data-stage="details"] .place-row {
    display: flex; align-items: center; gap: 8px; margin: 10px 0 12px; padding: 8px 10px 8px 12px;
    border-radius: 12px; background: var(--brand-50); font-size: 14px; font-weight: 600; color: var(--brand-800);
  }
  .place-row svg { flex: none; width: 18px; height: 18px; }
  .place-row span { flex: 1; }
  .place-row .link-btn { font-size: 14px; }

  .sheet:not([data-kind]) .stepper { margin: 4px 0 8px; }
  .sheet:not([data-kind]) .kind-option > span { min-height: 112px; }
  .sheet:not([data-kind]) .report-intro { margin-top: 12px; }
  /* Nothing to send yet: the foot keeps only the 112 line */
  .sheet:not([data-kind]) #report-submit { display: none; }
  .sheet:not([data-kind]) .sheet-foot { padding-top: 0; }
  .sheet:not([data-kind]) .emergency { margin-top: 0; }
}
/* Short phones: the two choices explain themselves; the steps go */
@media (max-width: 899px) and (max-height: 700px) {
  .sheet:not([data-kind]) .stepper { display: none; }
  .sheet:not([data-kind]) .sheet-head { padding-bottom: 10px; }
}
@media (max-width: 560px) {
  .sheet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--surface-3); }
}
@media (max-width: 400px) { .kind-option > span { padding: 10px; column-gap: 8px; } .kind-option b { font-size: 14px; } }
@media (max-width: 380px) {
  .opts-4 { grid-template-columns: repeat(2, 1fr); }
  .opt > span { min-height: 64px; }
}
/* Low laptop screens: a little less air, so the questions fit without scrolling */
@media (min-width: 900px) and (max-height: 820px) {
  .q { margin-top: 12px; }
  .q legend { margin-bottom: 6px; font-size: 15px; }
  .opt > span { min-height: 60px; }
  .opts-2 .opt > span { min-height: 50px; }
  .seg span { min-height: 34px; }
  .toggle-row { padding-block: 5px; }
  .sheet[data-kind] .kind-option > span { min-height: 36px; }
  .sheet-head { padding-top: 14px; }
  .sheet-foot { padding-top: 10px; }
  .emergency { margin-top: 8px; }
  .sheet[data-kind="damage"] .q { margin-top: 10px; }
  .sheet[data-kind="damage"] .opts { gap: 6px; }
  .sheet[data-kind="damage"] .opts-2 .opt > span { min-height: 44px; padding: 5px 10px; }
}

/* ---------------------------------------------------------------------
   Toast (errors)
   --------------------------------------------------------------------- */
.toast {
  position: fixed; z-index: 2000; left: 50%; top: 84px;
  transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .25s var(--ease-out);
  background: rgb(13 26 20 / .92); backdrop-filter: blur(12px); color: #fff;
  padding: 11px 18px; border-radius: 14px; box-shadow: var(--shadow-lg);
  font-size: 14.5px; font-weight: 500; max-width: calc(100% - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--alert); }

/* ---------------------------------------------------------------------
   Map popups (a report's details, "Jag ser dem också", "Min tomt", "Felaktig").
   Leaflet's popup, restyled; .vk-popup is the report popup (popupFor() in js/map/popups.js).
   --------------------------------------------------------------------- */
.leaflet-container { font: inherit; }
.leaflet-popup-content-wrapper { border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); padding: 0; }
.leaflet-popup-tip { background: var(--surface); box-shadow: none; }
.leaflet-popup-content { margin: 16px 18px; font-size: 14px; line-height: 1.45; min-width: 230px; }
.leaflet-popup-content p { margin: 0; }
.pop-title { font-weight: 700; font-size: 16px; letter-spacing: -.015em; margin-bottom: 2px !important; padding-right: 18px; }
.pop-meta { color: var(--ink-2); font-size: 13.5px; }
.pop-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 0; }
.pop-tags span { font-size: 12.5px; font-weight: 550; padding: 3px 9px; border-radius: 999px; background: var(--brand-50); color: var(--brand-800); }
.pop-confirm {
  display: block; margin-top: 12px; width: 100%; height: 40px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--brand-800); background: transparent; color: var(--brand-800); font-weight: 650; font-size: 14px;
  transition: background-color .15s, color .15s;
}
.pop-confirm:hover:not(:disabled) { background: var(--brand-50); }
.pop-confirm:disabled { border-color: var(--border); color: var(--ink-3); cursor: default; }
.pop-actions { display: flex; gap: 6px; margin-top: 12px; }
.pop-actions .pop-confirm { margin-top: 0; }
.pop-turnstile:not(:empty) { margin-top: 10px; }
.pop-primary { background: var(--brand-800) !important; color: #fff !important; }
.pop-secondary { border-color: var(--border-strong); color: var(--ink-2); }
.pop-error { margin-top: 8px !important; font-size: 13px; color: var(--alert); }
.pop-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--ink-3);
}
.pop-links { display: inline-flex; gap: 12px; }
.pop-link { border: 0; background: none; padding: 0; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.pop-link:hover { color: var(--ink); text-decoration-color: currentColor; }

.vk-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 20px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.vk-popup .leaflet-popup-content { margin: 0 !important; padding: 18px 20px 14px; width: 300px !important; max-width: calc(100vw - 48px); box-sizing: border-box; position: relative; }
.vk-popup .leaflet-popup-tip { box-shadow: none; border: 1px solid var(--border); }
.pop-x {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 9px;
  border: 0; background: rgb(14 32 23 / .06); color: var(--ink-2); font-size: 13px; cursor: pointer;
  display: grid; place-items: center; transition: background-color .15s;
}
.pop-x:hover { background: rgb(14 32 23 / .11); }
.pop-head { padding-right: 34px; }
.pop-age {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
.pop-age::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.vk-popup .pop-title { margin: 0 !important; padding: 0; font-size: 19px; font-weight: 720; letter-spacing: -.025em; line-height: 1.2; }
.pop-facts { margin: 12px 0 0; display: grid; gap: 6px; }
.pop-facts div { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.pop-facts dt { display: grid; color: var(--ink-3); padding-top: 2px; }
.pop-facts dt svg { width: 15px; height: 15px; }
.pop-facts dd { margin: 0; }
.vk-popup .pop-tags { margin-top: 12px; }
.vk-popup .pop-tags span { font-size: 12.5px; padding: 4px 10px; }
.vk-popup .pop-confirm {
  flex: 1; margin: 0; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; background: var(--brand-grad); color: #fff; box-shadow: 0 4px 12px rgb(8 36 25 / .2);
}
.vk-popup .pop-confirm svg { width: 16px; height: 16px; }
.vk-popup .pop-confirm:hover:not(:disabled) { background: var(--brand-grad); filter: brightness(1.08); }
.vk-popup .pop-confirm:disabled { background: var(--surface-2); color: var(--ink-3); box-shadow: none; border: 1px solid var(--border); }
.vk-popup .pop-foot { margin-top: 14px; padding-top: 10px; align-items: center; }
.pop-ref { font-variant-numeric: tabular-nums; }
.vk-popup .pop-actions .pop-confirm { flex: 1; }
.vk-popup .pop-secondary { background: var(--surface) !important; color: var(--ink-2) !important; border: 1px solid var(--border-strong) !important; box-shadow: none !important; }
.vk-popup .pop-confirm { width: 100%; margin-top: 14px; flex: none; white-space: nowrap; }
.pop-dim { display: block; color: var(--ink-3); font-size: 12.5px; }

/* ---------------------------------------------------------------------
   Welcome dialog
   --------------------------------------------------------------------- */
.welcome-backdrop {
  position: fixed; inset: 0; z-index: 1500;
  display: grid; place-items: center; padding: 20px;
  background: rgb(8 24 17 / .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade .25s ease;
}
.welcome {
  /* The text column keeps a fixed width; extra room goes to the photo, which shrinks
     first on smaller screens. */
  width: min(1110px, 100%); max-height: calc(100dvh - 40px); overflow: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 488px;
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  animation: rise .5s var(--ease-out) both;
}
.welcome-photo { margin: 0; position: relative; min-height: 100%; }
.welcome-photo picture { display: contents; } /* the img sizes itself to the figure */
.welcome-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 28% 60%; background: #c9d6c0; }
.welcome-photo figcaption {
  position: absolute; right: 12px; bottom: 12px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 500; color: #fff; background: rgb(0 0 0 / .35); backdrop-filter: blur(6px);
}
.welcome-body { padding: 36px 36px 30px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  padding: 5px 12px 5px 8px; border-radius: 999px; background: var(--brand-50);
  font-size: 12.5px; font-weight: 650; letter-spacing: .02em; color: var(--brand-800);
}
.eyebrow .boar-icon { width: 26px; height: 17px; }
.welcome h2 { margin: 0 0 14px; font-size: clamp(26px, 3.2vw, 34px); font-weight: 720; line-height: 1.12; letter-spacing: -.026em; }
.welcome p { margin: 0 0 14px; color: var(--ink-2); font-size: 15.5px; }
.welcome strong { color: var(--ink); font-weight: 650; }
.welcome-count { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink) !important; }
.welcome-count b { font-size: 22px; font-weight: 750; letter-spacing: -.02em; color: var(--brand-800); font-variant-numeric: tabular-nums; }
.welcome-count a { color: var(--brand-700); font-weight: 650; }
.welcome-points { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 4px 0 22px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.welcome-points li { display: inline-flex; align-items: center; gap: 7px; }
.welcome-points li::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: var(--brand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.9' fill='none' stroke='%230f3b2a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.welcome-more { margin: 18px 0 0 !important; font-size: 14px !important; }
.welcome-more a { color: var(--ink-2); text-underline-offset: 3px; }
.welcome-body > * { animation: fade-up .5s var(--ease-out) both; }
.welcome-body > :nth-child(2) { animation-delay: .06s; }
.welcome-body > :nth-child(3) { animation-delay: .12s; }
.welcome-body > :nth-child(4) { animation-delay: .18s; }
.welcome-body > :nth-child(5) { animation-delay: .24s; }
.welcome-body > :nth-child(6) { animation-delay: .3s; }
.welcome-body > :nth-child(7) { animation-delay: .36s; }

/* Tablets and narrow windows (761–999 px): too narrow for photo beside text, so the
   photo goes on top, whole (4:3). Phones keep their own layout. */
@media (min-width: 761px) and (max-width: 999px) {
  .welcome { width: min(560px, 100%); grid-template-columns: 1fr; }
  .welcome-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .welcome-photo img { object-position: 50% 50%; }
}
@media (max-width: 760px) {
  .welcome-backdrop { align-items: end; padding: 0; }
  .welcome { grid-template-columns: 1fr; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92dvh; }
  .welcome-photo { height: 200px; min-height: 0; }
  .welcome-photo img { object-position: 50% 45%; }
  .welcome-body { padding: 22px 20px max(20px, env(safe-area-inset-bottom)); }
  .welcome-actions { flex-direction: column; }
  .welcome-actions .btn { width: 100%; }
}

/* ---------------------------------------------------------------------
   Receipt after reporting
   --------------------------------------------------------------------- */
.receipt {
  position: absolute; z-index: 800; left: 50%; bottom: 16px;
  width: min(560px, calc(100% - 24px)); max-height: calc(100% - 32px); overflow-y: auto;
  transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.receipt.enter { animation: receipt-in .4s var(--ease-out) both; }
@keyframes receipt-in { from { opacity: 0; transform: translate(-50%, 18px); } }
body:has(.receipt:not([hidden])) .report-fab, body:has(.receipt:not([hidden])) .view-panel { display: none; }
/* The thank-you: the report's own icon with "+1", what was reported, the kommun's year with
   this month lit, and what the report does. Icons sit in rounded squares (the site's shape
   for icons; circles are only for dots and switch knobs). */
.receipt-main { position: relative; }
.receipt-x { position: absolute; top: 14px; right: 14px; z-index: 1; }
.receipt-hero {
  padding: 26px 24px 18px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, var(--brand-50) 0%, rgb(255 255 255 / 0) 70%);
}
.receipt-badge {
  position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px;
  background: var(--brand-grad); color: #fff; box-shadow: 0 8px 20px rgb(12 51 36 / .28);
  animation: badge-in .5s var(--ease-glide) both;
}
.receipt-badge svg { display: none; }
.receipt-badge .rb-boar { width: 40px; height: 26px; }
.receipt-badge .rb-hoof { width: 24px; height: 30px; }
.receipt:not([data-kind="damage"]) .rb-boar, .receipt[data-kind="damage"] .rb-hoof { display: block; }
.rb-plus {
  position: absolute; top: -8px; right: -12px; padding: 3px 7px; border-radius: 8px;
  background: var(--boar); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.1;
  box-shadow: 0 0 0 2.5px var(--surface); animation: plus-in .45s var(--ease-out) .35s both;
}
@keyframes badge-in { from { transform: scale(.7); opacity: 0; } }
@keyframes plus-in { from { transform: scale(0) rotate(-12deg); } 60% { transform: scale(1.2) rotate(4deg); } }
.receipt-hero h2 { margin: 12px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }
.receipt-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.receipt-tags li { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.receipt-ref { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.receipt-impact { margin: 0 20px 12px; padding: 14px 16px 12px; border-radius: 16px; background: var(--brand-50); }
.impact-place { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--brand-800); }
.impact-place svg { width: 16px; height: 16px; }
/* Two numbers side by side: reports in the kommun this year, and its place among kommuner */
.impact-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.istat { display: grid; gap: 2px; margin: 0; }
.istat + .istat { padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--brand-700) 18%, transparent); }
.istat b { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--brand-800); font-variant-numeric: tabular-nums; }
.istat span { font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
/* Reports per month, last 12 months: a small labelled bar chart. This month's bar is dark
   ("Med din rapport"). */
.impact-chart { margin: 12px 0 8px; }
.impact-chart figcaption { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.impact-legend { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.impact-legend i { width: 9px; height: 9px; border-radius: 2px; background: var(--brand-700); }
.impact-bars { display: flex; align-items: stretch; gap: 4px; height: 52px; }
.impact-bars span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 0; }
.impact-bars b { font-size: 10.5px; font-weight: 600; line-height: 1; text-align: center; margin-bottom: 2px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.impact-bars i { flex: none; max-height: calc(100% - 13px); min-height: 3px; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--brand-700) 22%, transparent); transform-origin: bottom; animation: bar-grow .6s var(--ease-glide) both; }
.impact-bars .now b { font-size: 11.5px; font-weight: 700; color: var(--brand-800); }
.impact-bars .now i { background: var(--brand-700); }
.impact-months { display: flex; gap: 4px; margin-top: 3px; }
.impact-months span { flex: 1; text-align: center; font-size: 10.5px; font-weight: 500; color: var(--ink-3); }
.impact-months span.now { font-weight: 700; color: var(--brand-800); }
@keyframes bar-grow { from { transform: scaleY(0); } }
.receipt-impact a { font-size: 13.5px; font-weight: 600; color: var(--brand-700); }

/* What the report does: three icon tiles */
.receipt-why { margin: 0 20px; }
.why-label { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.why-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.why-tiles li { display: grid; justify-items: center; gap: 3px; padding: 10px 6px; border-radius: 14px; background: var(--surface-2); text-align: center; }
.why-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 3px; border-radius: 10px; background: var(--surface); color: var(--brand-700); box-shadow: 0 1px 2px rgb(8 20 14 / .08); }
.why-icon svg { width: 18px; height: 18px; }
.why-tiles b { font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.why-tiles small { font-size: 11.5px; line-height: 1.3; color: var(--ink-2); }
.receipt-share { padding: 16px 20px 4px; }
.receipt-share > p { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.receipt-share strong { color: var(--ink); }
.receipt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 20px 16px; border-top: 1px solid var(--border); }
.receipt-undo { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.receipt-undo .link-btn { font-size: 13.5px; }
.undo-time { font-variant-numeric: tabular-nums; }
.receipt-foot .btn { height: 40px; }
.receipt-undone { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; }
.receipt-undone p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* Computers: the receipt takes the form's place on the left (same place and size as the
   info card and the form), so the new marker stays exactly where the pin was and the map
   doesn't move. Compact so it fits the shared card height. */
@media (min-width: 900px) {
  .receipt { left: 16px; top: 84px; bottom: auto; width: 380px; height: min(700px, calc(100% - 100px)); max-height: none; transform: none; }
  .receipt.enter { animation: glide-in .5s var(--ease-glide) .1s both; }
  .receipt-main { display: flex; flex-direction: column; height: 100%; }
  .receipt-hero { padding: 18px 20px 10px; }
  .receipt-badge { width: 54px; height: 54px; border-radius: 17px; }
  .receipt-badge .rb-boar { width: 34px; height: 22px; }
  .receipt-badge .rb-hoof { width: 20px; height: 26px; }
  .receipt-hero h2 { margin-top: 8px; font-size: 20px; }
  .receipt-tags { margin-top: 8px; }
  .receipt-impact { padding: 12px 14px 10px; margin-bottom: 10px; }
  .impact-chart { margin: 8px 0 4px; }
  .impact-bars { height: 42px; }
  .why-label { margin-bottom: 6px; }
  .why-tiles small { display: none; }
  .why-tiles li { padding: 8px 4px; }
  .why-icon { width: 28px; height: 28px; border-radius: 8px; margin-bottom: 1px; }
  .why-icon svg { width: 16px; height: 16px; }
  .receipt-share { padding: 10px 20px 0; }
  .receipt-share > p { margin-bottom: 6px; }
  .receipt-share .share-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .receipt-share .share-opt { flex-direction: column; justify-content: center; gap: 3px; height: auto; padding: 7px 2px; font-size: 11.5px; line-height: 1.15; text-align: center; }
  .receipt-foot { margin-top: auto; padding-block: 10px 12px; }
}
/* Phones: the receipt starts below the header (on a phone with browser bars it was taller
   than the screen, so the badge and ✕ slid under the header); the rest scrolls inside. */
@media (max-width: 899px) {
  .receipt { max-height: calc(100% - 76px); }
}
@media (max-width: 560px) {
  .receipt { bottom: 0; width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  .why-tiles small { display: none; }
  .why-tiles li { padding: 8px 4px; }
  .impact-bars { height: 42px; }
  .impact-chart { margin: 10px 0 6px; }
  .receipt-hero { padding: 18px 20px 12px; }
  .receipt-badge { width: 54px; height: 54px; border-radius: 17px; }
}
/* Low laptop screens: tighter still, so the receipt fits the card height without scrolling */
@media (min-width: 900px) and (max-height: 820px) {
  .receipt-hero { padding-top: 14px; padding-bottom: 8px; }
  .receipt-badge { width: 48px; height: 48px; border-radius: 15px; }
  .receipt-badge .rb-boar { width: 32px; height: 21px; }
  .receipt-tags li { padding: 3px 9px; }
  .receipt-impact { padding: 10px 14px; margin-bottom: 8px; }
  .receipt-impact a { display: none; }
  .impact-place { margin-bottom: 4px; }
  .istat b { font-size: 26px; }
  .why-tiles li { padding: 6px 4px; }
  .receipt-share > p { margin-bottom: 8px; }
}

/* ---------------------------------------------------------------------
   Info card <-> report form <-> receipt on computers: the leaving card slides out to the
   left quickly; the next one starts while it leaves and glides into the same place, fast
   at first and then slowing to a soft stop. On phones the info card fades while the form
   sheet slides up from the bottom.
   --------------------------------------------------------------------- */
.view-panel { transition: opacity .28s var(--ease-out) .12s, transform .28s var(--ease-out) .12s, visibility 0s linear 0s; }
body.reporting .view-panel {
  opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
@media (min-width: 900px) {
  .view-panel { transition: transform .5s var(--ease-glide) .1s, visibility 0s linear 0s; }
  body.reporting .view-panel {
    opacity: 1; transform: translateX(calc(-100% - 40px));
    transition: transform .22s var(--ease-leave), visibility 0s linear .22s;
  }
  .sheet {
    visibility: hidden; transform: translateX(calc(-100% - 40px));
    transition: transform .22s var(--ease-leave), visibility 0s linear .22s;
  }
  body.reporting .sheet { visibility: visible; transform: none; transition: transform .5s var(--ease-glide) .1s, visibility 0s linear 0s; }
  .view-panel.glide-in { animation: glide-in .5s var(--ease-glide) both; }
}
@keyframes glide-in { from { transform: translateX(calc(-100% - 40px)); } }

/* ---------------------------------------------------------------------
   Windows that scroll (info card, report questions, receipt, welcome). They fit at
   normal screen sizes; on small screens they scroll without a visible scrollbar
   (touch, wheel and keyboard scrolling keep working), and say "more below" with a
   chevron at the bottom edge (scrollHint() in shared.js): a zero-height sticky row,
   so it takes no room, and a soft fade that shows the cut.
   --------------------------------------------------------------------- */
.view-panel, .sheet-body, .receipt { scrollbar-width: none; }
.view-panel::-webkit-scrollbar, .sheet-body::-webkit-scrollbar, .receipt::-webkit-scrollbar { display: none; }
.view-panel, .sheet-body, .receipt, .welcome { overflow-x: hidden; }
.scroll-more { position: sticky; bottom: 0; z-index: 5; grid-column: 1 / -1; height: 0; pointer-events: none; }
.view-panel > .scroll-more { margin-top: -10px; } /* the panel's gap */
.scroll-more::before {
  content: ""; position: absolute; left: -20px; right: -20px; bottom: 0; height: 56px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 85%);
  opacity: 0; transition: opacity .2s ease;
}
.scroll-more button {
  position: absolute; left: 50%; bottom: 8px; width: 34px; height: 34px; margin-left: -17px; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow-sm); cursor: pointer;
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s var(--ease-out);
}
.scroll-more button svg { width: 20px; height: 20px; }
.scroll-more.on::before { opacity: 1; }
.scroll-more.on button { opacity: 1; transform: none; pointer-events: auto; animation: nudge 1.6s var(--ease-out) .4s 3; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(4px); } }

/* ---------------------------------------------------------------------
   Share options (receipt + dialog)
   --------------------------------------------------------------------- */
.share-options { display: flex; flex-wrap: wrap; gap: 8px; }
.share-opt {
  display: inline-flex; align-items: center; gap: 8px; height: 40px;
  padding: 0 14px; border-radius: 12px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow-xs);
  transition: background-color .15s, border-color .15s, color .15s;
}
.share-opt svg { width: 17px; height: 17px; color: var(--ink-2); }
.share-opt:hover { background: var(--surface-2); }
.share-opt.done { border-color: var(--brand-700); color: var(--brand-800); background: var(--brand-50); }
.share-opt.done svg { color: var(--brand-800); }
.share-dialog {
  width: min(470px, calc(100% - 32px)); padding: 0; border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
}
.share-dialog[open] { animation: fade-up .3s var(--ease-out); }
.share-dialog::backdrop { background: rgb(8 24 17 / .4); backdrop-filter: blur(4px); }
.share-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px 4px 22px; }
.share-dialog h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.share-lead { margin: 0; padding: 0 22px 16px; font-size: 14.5px; color: var(--ink-2); }
.share-dialog .share-options { display: grid; grid-template-columns: 1fr 1fr; padding: 0 22px; }
.share-dialog .share-opt { justify-content: center; height: 46px; }
.share-url { padding: 14px 22px 22px; }
.share-url input { width: 100%; font-size: 13.5px; color: var(--ink-2); padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }

/* =====================================================================
   Content pages (Statistik, Om, Kontrollpanel, Underhåll, 404)
   ===================================================================== */
.hero {
  /* No z-index here: the kommun search list must be able to float above the
     cards that overlap the bottom of this section. */
  position: relative; color: #fff;
  background:
    radial-gradient(rgb(255 255 255 / .05) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(1200px 400px at 85% -10%, rgb(255 255 255 / .09), transparent 60%),
    radial-gradient(800px 360px at 0% 110%, rgb(86 168 122 / .22), transparent 60%),
    linear-gradient(180deg, var(--brand-800), var(--brand-950));
}
.hero-inner { position: relative; max-width: 1160px; margin: 0 auto; padding: 56px 16px 120px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: #b9dcc8; }
.hero h1 { margin: 0; font-size: clamp(34px, 5.4vw, 60px); font-weight: 720; line-height: 1.04; letter-spacing: -.034em; max-width: 16ch; }
.hero .lead { margin: 16px 0 0; max-width: 58ch; font-size: 17.5px; line-height: 1.5; color: #cfe3d7; }
.hero-tools { position: relative; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.rank-badge {
  margin: 0; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: 999px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16);
  font-size: 14px; font-weight: 600; color: #fff;
}
.rank-badge b { color: #fff; font-weight: 750; }

.page { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.page-overlap { margin-top: -84px; position: relative; z-index: 2; }

/* Entrance on content pages */
.hero-inner > * { animation: fade-up .55s var(--ease-out) both; }
.hero-inner > :nth-child(2) { animation-delay: .05s; }
.hero-inner > :nth-child(3) { animation-delay: .1s; }
.hero-inner > :nth-child(4) { animation-delay: .15s; }

/* ---------------------------------------------------------------------
   Statistics page
   --------------------------------------------------------------------- */
/* Kommun search (combobox) */
.combo { position: relative; z-index: 10; width: min(380px, 100%); }
.combo-input {
  width: 100%; height: 48px; padding: 0 44px; border-radius: 14px;
  border: 1px solid rgb(255 255 255 / .2); background: rgb(255 255 255 / .96); color: var(--ink);
  font-size: 15.5px; font-weight: 550; box-shadow: 0 8px 24px rgb(0 0 0 / .18);
}
.combo-input::placeholder { color: var(--ink-3); font-weight: 500; }
.combo-input:focus { outline: 3px solid rgb(185 220 200 / .6); outline-offset: 1px; }
.combo-icon { position: absolute; left: 14px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; color: var(--ink-3); pointer-events: none; }
.combo-clear { position: absolute; right: 8px; top: 50%; margin-top: -16px; width: 32px; height: 32px; border-radius: 9px; border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 15px; }
.combo-clear:hover { background: var(--surface-2); }
.combo-list {
  position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 340px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg);
}
.combo-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; font-size: 14.5px; font-weight: 550; }
.combo-list li small { color: var(--ink-3); font-weight: 500; font-size: 12.5px; }
.combo-list li[aria-selected="true"], .combo-list li:hover { background: var(--brand-50); }
.combo-list .combo-empty { color: var(--ink-3); cursor: default; }

/* KPI tiles */
.tiles { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 12px; }
.tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px 22px; box-shadow: var(--shadow-md);
}
.tile-label { margin: 0; font-size: 13.5px; font-weight: 550; color: var(--ink-2); }
.tile-value { margin: 6px 0 0; font-size: 36px; font-weight: 750; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tile-hero .tile-value { font-size: 56px; }
.tile-note { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); }
.delta {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 3px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--ink-2);
}
.delta.up { background: #fdebe4; color: #a3341a; }
.delta.down { background: var(--brand-50); color: var(--brand-800); }
.delta svg { width: 12px; height: 12px; }
.delta-note { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.tile-label .damage-mark { margin: 0 7px 0 2px; vertical-align: -2px; }
.tiles .tile { animation: fade-up .55s var(--ease-out) both; }
.tiles .tile:nth-child(1) { animation-delay: .12s; }
.tiles .tile:nth-child(2) { animation-delay: .17s; }
.tiles .tile:nth-child(3) { animation-delay: .22s; }
.tiles .tile:nth-child(4) { animation-delay: .27s; }

/* Cards & grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.grid-2 > * { min-width: 0; }
.grid-2 > .wide { grid-column: 1 / -1; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 22px 24px; box-shadow: var(--shadow-sm); overflow-x: auto;
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.card .sub { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-3); }
.card-tag { flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }

/* Charts: seen boars in green, damage in soil brown */
.chart { position: relative; width: 100%; }
.chart svg { display: block; overflow: visible; }
.chart .axis text, .chart .label { fill: var(--ink-3); font-size: 12px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .value-label { fill: var(--ink-2); font-size: 12px; font-weight: 650; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .night { fill: var(--surface-2); }
.chart .bar { fill: var(--chart); }
.chart .bar.soft { fill: var(--chart-soft); }
.chart .hit { fill: transparent; }
.chart .bar.active { filter: brightness(1.2); }
.chart .bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .8s var(--ease-out), filter .15s; transition-delay: var(--d, 0ms); }
.chart .bar.h { transform-origin: 0 50%; transform: scaleX(0); }
.chart.in-view .bar { transform: none; }
.chart .bar.damage { fill: var(--damage); }
.chart .bar.damage.soft { fill: #b89a80; }
.chart-legend { display: flex; gap: 18px; margin: 0 0 6px; font-size: 13px; color: var(--ink-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.key-sighting { background: var(--chart); }
.key-damage { background: var(--damage); }
.tooltip {
  position: absolute; pointer-events: none; z-index: 10;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 550;
  padding: 7px 11px; border-radius: 10px; white-space: nowrap; box-shadow: var(--shadow-md);
  transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity .12s;
}
.tooltip.show { opacity: 1; }
details.table-view { margin-top: 14px; font-size: 13.5px; }
details.table-view summary { cursor: pointer; color: var(--ink-3); font-weight: 550; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.table-view summary::-webkit-details-marker { display: none; }
details.table-view summary::before { content: "▸"; transition: transform .15s; }
details.table-view[open] summary::before { transform: rotate(90deg); }
details.table-view table { margin-top: 10px; }

table.data { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
table.data th, table.data td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--border); }
table.data th { font-weight: 600; color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
table.data td.num, table.data th.num { text-align: right; }
table.data tr:last-child td { border-bottom: 0; }
table.data a { color: var(--brand-700); font-weight: 600; text-decoration: none; }
table.data a:hover { text-decoration: underline; }

/* Ranking list */
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-row {
  display: grid; grid-template-columns: 34px minmax(0, 1.3fr) minmax(80px, 2fr) 64px 64px; gap: 14px; align-items: center;
  padding: 9px 10px; border-radius: 12px; text-decoration: none; color: inherit;
  transition: background-color .15s;
}
.rank-row + .rank-row { margin-top: 2px; }
a.rank-row:hover { background: var(--surface-2); }
.rank-row.current { background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-200); }
.rank-head { padding-top: 0; padding-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.rank-no {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: var(--surface-2); font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.rank-row.top .rank-no { background: var(--brand-800); color: #fff; }
.rank-head .rank-no { background: none; height: auto; }
.rank-name { min-width: 0; }
.rank-name b { display: block; font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name small { display: block; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.rank-bar i { display: block; height: 100%; border-radius: 4px; background: var(--chart); transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s var(--ease-out); transition-delay: var(--d, 0ms); }
.rank-list.in-view .rank-bar i { transform: scaleX(1); }
.rank-num { text-align: right; font-size: 14.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.rank-num.muted { font-weight: 550; color: var(--ink-2); }

/* Hotspots ("Mest drabbade områden"): numbered squares on the map, and a list with the
   same numbers. In the statistics' green (red is kept for seen boars); numbers in rounded
   squares. */
#hotspot-map { height: 360px; border-radius: 16px; border: 1px solid var(--border); overflow: hidden; }
.map-wheel-hint {
  position: absolute; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px;
  background: rgb(8 20 14 / .45); color: #fff; font-size: 15px; font-weight: 600; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.map-wheel-hint.show { opacity: 1; }
.hotspot-pin, .hotspot-no {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: var(--chart); color: #fff; font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.hotspot-pin { transition: transform .15s ease; }
.hotspot-pin.active { background: var(--brand-900); }
.hotspot-square { stroke: var(--chart); stroke-width: 1.5; stroke-dasharray: 5 4; fill: var(--chart); fill-opacity: .08; transition: opacity .2s ease; }
#hotspot-map.zooming .hotspot-square { opacity: 0; transition: none; }
.hotspot-square.active { stroke: var(--brand-900); stroke-width: 2.5; stroke-dasharray: none; fill: var(--chart); fill-opacity: .1; }
/* The close-up: seen boars as small silhouettes and damage as hoofprints, with a count
   when several */
.hotspot-hoof { background: none; border: 0; color: var(--damage); position: relative; }
.hotspot-hoof svg { display: block; width: 100%; height: 100%; }
.hotspot-hoof .hotspot-count { background: var(--damage); }
.hotspot-boar { background: none; border: 0; color: var(--boar); position: relative; }
.hotspot-boar svg { display: block; width: 100%; height: 100%; }
.hotspot-count { position: absolute; right: -9px; top: -9px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--boar); color: #fff; font-size: 10.5px; line-height: 16px; text-align: center; border: 1.5px solid #fff; }
.hotspot-caption { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; color: var(--ink-2); }
.hotspot-caption p { margin: 0; }
.hotspot-caption strong { color: var(--ink); }
.hotspot-caption-actions { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px !important; }
.hotspot-caption-actions a { color: var(--brand-700); font-weight: 600; }

.hotspot-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.hotspot-list li { display: flex; align-items: center; gap: 8px; border-radius: 14px; transition: background .15s ease; }
.hotspot-list li:hover, .hotspot-list li.active { background: var(--surface-2); }
.hotspot-row {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 10px 12px;
  background: none; border: 0; border-radius: 14px; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.hotspot-row:focus-visible, .hotspot-maplink:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hotspot-no { flex: none; box-shadow: none; border: 0; }
.hotspot-list li.active .hotspot-no { background: var(--brand-900); }
.hotspot-body { flex: 1; min-width: 0; display: grid; gap: 7px; }
.hotspot-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.hotspot-line { font-size: 15px; color: var(--ink-2); }
.hotspot-line b { color: var(--ink); font-weight: 650; }
.hotspot-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.hotspot-bar i { display: block; height: 100%; border-radius: 3px; background: var(--chart); }
.hotspot-recent { font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.hotspot-recent.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-600); }
.hotspot-maplink {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 6px; border-radius: 12px;
  color: var(--brand-700); background: var(--surface); border: 1px solid var(--border); transition: background .15s ease, border-color .15s ease;
}
.hotspot-maplink:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.hotspot-maplink svg { width: 20px; height: 20px; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.notice-card { margin-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; font-size: 14px; color: var(--ink-2); }
.notice-card svg { width: 22px; height: 22px; color: var(--brand-700); margin-top: 1px; }
.notice-card p { margin: 0; }
.notice-card strong { color: var(--ink); }
.empty-state { padding: 40px 20px; text-align: center; color: var(--ink-3); }
/* Statistics could not be loaded */
.load-error { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.load-error p { margin: 0; }
/* Statistics page with no reports yet */
.empty-card { text-align: center; padding: 48px 24px; }
.empty-card h2 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.01em; }
.empty-card p { margin: 0 auto 22px; max-width: 560px; color: var(--ink-2); line-height: 1.55; }

@media (max-width: 860px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile-hero, .tile:last-child { grid-column: 1 / -1; }
  .tile-hero .tile-value { font-size: 46px; }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rank-row { grid-template-columns: 28px minmax(0, 1fr) 54px 48px; gap: 10px; }
  .rank-bar { display: none; }
  .hotspot-row { gap: 12px; padding: 10px 8px; }
  .hotspot-line { font-size: 14px; }
}

/* ---------------------------------------------------------------------
   About page
   --------------------------------------------------------------------- */
.about-hero .hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding-bottom: 72px; }
.about-hero figure { margin: 0; position: relative; }
.about-hero img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.about-hero figcaption { margin-top: 10px; font-size: 12.5px; color: #a9c9b7; }

.section { padding: 64px 0 0; }
.section-head { max-width: 680px; margin-bottom: 24px; }
.section-kicker { margin: 0 0 8px; font-size: 12.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-700); }
.section h2 { margin: 0; font-size: clamp(26px, 3.4vw, 36px); font-weight: 720; letter-spacing: -.028em; line-height: 1.14; }
.section-head p:not(.section-kicker) { margin: 12px 0 0; font-size: 16.5px; color: var(--ink-2); }
.prose { max-width: 66ch; color: var(--ink-2); font-size: 16px; }
.prose p { margin: 0 0 14px; }
.prose strong { color: var(--ink); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: step; }
.step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 11px;
  background: var(--brand-grad); color: #fff; font-weight: 700; font-size: 15px;
}
.step h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
.step p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.steps-4 { grid-template-columns: repeat(4, 1fr); }

.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.feature-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 12px; background: var(--brand-50); color: var(--brand-800); }
.feature-icon svg { width: 21px; height: 21px; }
.feature h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.feature p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.feature p + p { margin-top: 8px; }
.feature strong { color: var(--ink); }
.feature .btn { margin-top: 14px; }

.callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 64px; padding: 28px 30px; border-radius: var(--r-xl); color: #fff;
  background: radial-gradient(600px 200px at 100% 0%, rgb(255 255 255 / .08), transparent), linear-gradient(180deg, var(--brand-800), var(--brand-950));
  box-shadow: var(--shadow-lg);
}
.callout h3 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.025em; }
.callout p { margin: 6px 0 0; color: #cfe3d7; font-size: 15px; }
.callout .btn { background: #fff; color: var(--brand-900); border: 0; }
.callout .btn:hover { background: #f1f5f2; }
.credits { margin-top: 40px; font-size: 13px; color: var(--ink-3); }
.callout-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.callout .btn-callout-ghost { background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / .35); }
.callout .btn-callout-ghost:hover { background: rgb(255 255 255 / .08); }

/* Vad vi vill: three big numbers with their sources */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fact { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.fact p { margin: 0; font-size: 15px; color: var(--ink-2); }
.fact .fact-num { margin-bottom: 8px; font-size: 40px; font-weight: 750; line-height: 1.05; letter-spacing: -.03em; color: var(--brand-800); font-variant-numeric: tabular-nums; }
.fact-src { margin-top: auto; padding-top: 14px; font-size: 12.5px; color: var(--ink-3); }

/* Nyheter: one page, newest post first */
.news-hero .hero-inner { max-width: 760px; padding-bottom: 72px; }
.page.news { max-width: 760px; }
.post { margin-top: 48px; padding: 30px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); scroll-margin-top: 90px; }
.post + .post { margin-top: 20px; }
.post time { font-size: 12.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-700); }
.post h2 { margin: 6px 0 14px; font-size: clamp(24px, 3vw, 30px); font-weight: 720; line-height: 1.15; letter-spacing: -.025em; }
.post .prose { font-size: 16.5px; }
.post-share { margin-top: 4px; }
.post-share svg { width: 17px; height: 17px; }

@media (max-width: 1000px) { .steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .about-hero .hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .two-col { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .steps-4, .facts { grid-template-columns: 1fr; }
  .post { padding: 22px 20px; }
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer { margin-top: 80px; background: var(--brand-950); color: #b7cdbf; }
.site-footer-inner { max-width: 1160px; margin: 0 auto; padding: 44px 16px 36px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; font-size: 14px; }
.foot-brand { display: flex; gap: 14px; align-items: flex-start; }
.foot-brand img { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.site-footer p { margin: 0 0 6px; max-width: 46ch; }
.site-footer strong { color: #fff; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; align-content: flex-start; }
.site-footer nav a { color: #dce9e1; text-decoration: none; font-weight: 550; }
.site-footer nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .foot-note { grid-column: 1 / -1; max-width: none; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .1); font-size: 12.5px; color: #8fa99a; }
@media (max-width: 640px) { .site-footer-inner { grid-template-columns: 1fr; } .site-footer nav { justify-content: flex-start; } }

/* ---------------------------------------------------------------------
   Control panel (/status): status, report numbers, Hantera, Vad hände?
   --------------------------------------------------------------------- */
.status-page { max-width: 720px; padding-top: 48px; padding-bottom: 64px; }
.status-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); --state: var(--ink-3); }
.status-card[data-state="ok"] { --state: #1f8a4c; }
.status-card[data-state="warn"] { --state: #c98a0b; }
.status-card[data-state="down"] { --state: var(--boar); }
.status-head { display: flex; align-items: flex-start; gap: 18px; }
.status-head h1 { margin: 0; font-size: 30px; letter-spacing: -.02em; color: var(--state); }
.status-head p { margin: 4px 0 0; color: var(--ink-2); }
.status-light { flex: none; margin-top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--state); box-shadow: 0 0 0 6px color-mix(in srgb, var(--state) 18%, transparent); }
.status-card[data-state="checking"] .status-light { animation: status-pulse 1s ease-in-out infinite alternate; }
@keyframes status-pulse { from { opacity: .35; } to { opacity: 1; } }
.status-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.status-checks li { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); }
.status-checks li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-1px); background: #1f8a4c; }
.status-checks li[data-state="warn"]::before { background: #c98a0b; }
.status-checks li[data-state="error"] { color: var(--ink); background: color-mix(in srgb, var(--boar) 8%, var(--surface)); }
.status-checks li[data-state="error"]::before { background: var(--boar); }
.status-meta { margin: 18px 0 16px; font-size: 13.5px; color: var(--ink-3); }

.cp-card { margin-top: 18px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }
.cp-card h2 { margin: 0 0 16px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.cp-head { display: flex; align-items: baseline; justify-content: space-between; }
.cp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cp-tile { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); }
.cp-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cp-tile > b { display: block; margin: 4px 0 2px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cp-split { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cp-split svg { width: 20px; height: 13px; color: var(--boar); }
.cp-split .damage-mark, .cp-kind .damage-mark { background: var(--damage); }
.cp-dot { color: var(--ink-3); margin: 0 2px; }
.cp-sub { margin: 22px 0 10px; font-size: 14.5px; font-weight: 650; }
.cp-sub span { margin-left: 6px; font-weight: 500; font-size: 13px; color: var(--ink-3); }

/* Reports per hour: one series, bars anchored to the baseline with rounded tops */
.cp-chart { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 96px; padding-top: 18px; border-bottom: 1px solid var(--border-strong); }
.cp-chart span { position: relative; height: 100%; display: flex; align-items: flex-end; outline: none; cursor: default; }
.cp-chart i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--brand-700); }
.cp-chart i[data-value]::before { content: attr(data-value); position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); font-size: 12px; font-weight: 700; font-style: normal; color: var(--ink); }
.cp-chart span:has(i[data-value]) i { position: relative; }
.cp-chart span:hover i, .cp-chart span:focus-visible i { background: var(--brand-900, #0c3324); }
.cp-chart span:hover::after, .cp-chart span:focus::after {
  content: attr(data-tip); position: absolute; z-index: 2; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  padding: 5px 8px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none;
}
.cp-chart span:nth-child(-n+4):hover::after, .cp-chart span:nth-child(-n+4):focus::after { left: 0; transform: none; }
.cp-chart span:nth-last-child(-n+4):hover::after, .cp-chart span:nth-last-child(-n+4):focus::after { left: auto; right: 0; transform: none; }
.cp-axis { position: relative; height: 20px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cp-axis span { position: absolute; top: 4px; transform: translateX(-50%); }

.cp-top { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: top; }
.cp-top li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); counter-increment: top; }
.cp-top li::before { content: counter(top); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--brand-50); color: var(--brand-800); font-size: 12.5px; font-weight: 700; }
.cp-top li span { flex: 1; font-weight: 600; }
.cp-top li b { font-variant-numeric: tabular-nums; }
.cp-note { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-2); }

/* Hantera */
.cp-unlock label { display: block; margin-bottom: 10px; color: var(--ink-2); }
.cp-key-row { display: flex; gap: 8px; }
.cp-key-row input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 12px; font: inherit; font-size: 16px; }
.cp-key-row input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cp-key-row .btn { height: 44px; }
.cp-error { margin: 8px 0 0; font-weight: 600; color: var(--alert); }
.cp-pause { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 14px; background: var(--brand-50); }
.cp-pause[data-paused="true"] { background: #fff6e0; }
.cp-pause b { font-size: 15.5px; }
.cp-pause p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); }
.cp-tabs { margin-top: 16px; }
.cp-tabs span { font-weight: 500; color: var(--ink-3); }
.cp-list-help { margin: 10px 2px; font-size: 13.5px; color: var(--ink-2); }
.cp-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cp-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.cp-row.done { background: var(--surface-2); }
.cp-kind { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--boar) 9%, var(--surface)); }
.cp-kind[data-kind="damage"] { background: color-mix(in srgb, var(--damage) 9%, var(--surface)); }
.cp-kind svg { width: 22px; height: 14px; color: var(--boar); }
.cp-what { flex: 1; min-width: 0; }
.cp-what b { font-size: 14.5px; }
.cp-what p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.cp-row .btn { flex: none; height: 36px; padding: 0 14px; }
.cp-empty { padding: 14px; text-align: center; color: var(--ink-3); }

/* Vad hände? */
.cp-intro { margin: -6px 0 14px; color: var(--ink-2); }
.cp-cases { display: grid; gap: 8px; }
.cp-cases details { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.cp-cases summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-weight: 650; cursor: pointer; list-style: none; }
.cp-cases summary::-webkit-details-marker { display: none; }
.cp-cases summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease-out); }
.cp-cases details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.cp-cases details[open] { background: var(--surface-2); }
.cp-cases ol { margin: 0; padding: 0 16px 14px 34px; display: grid; gap: 6px; color: var(--ink-2); }
.cp-ask { margin: 16px 0 0; font-size: 14px; color: var(--ink-2); }

@media (max-width: 560px) {
  .status-page { padding-top: 24px; }
  .cp-card { padding: 18px 16px; }
  .cp-tiles { grid-template-columns: 1fr 1fr; }
  .cp-tile:last-child { grid-column: 1 / -1; }
  .cp-row { flex-wrap: wrap; }
  .cp-row .btn { margin-left: 46px; }
}

/* ---------------------------------------------------------------------
   Maintenance page (/underhall): the message fills the screen
   --------------------------------------------------------------------- */
.maintenance-page .hero { min-height: calc(100vh - 68px); min-height: calc(100dvh - 68px); display: flex; align-items: center; }
.maintenance-page .hero .lead + .lead { margin-top: 14px; }

/* ---------------------------------------------------------------------
   Print & reduced motion
   --------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .actions, .hero-tools .combo, details.table-view summary { display: none; }
  .hero { background: none; color: var(--ink); }
  .hero .lead, .hero-kicker { color: var(--ink-2); }
  .hero-inner { padding: 0 0 24px; }
  .page-overlap { margin-top: 0; }
  details.table-view > *:not(summary) { display: block; }
  .card, .tile { break-inside: avoid; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .chart .bar, .rank-bar i { transform: none; }
}