/* Tema: naturreservatsskylten. Blå #0E4097, vit kant, vit sexarmad stjärna, sans-serif. */
:root {
  --blue: #0E4097; --blue-dark: #092C6B; --bg: #EDEFF2; --card: #FFFFFF;
  --line: #CDD3DC; --line-soft: #E4E8EE; --ink: #15233A; --muted: #5A6577;
  --band-muted: #C9D6F0; --dot: #A9B3C0;
}
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Inter Tight', system-ui, sans-serif; display: flex; flex-direction: column; min-height: 100vh }
a { color: var(--blue) } a:hover { color: var(--blue-dark) }
.wrap { max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 16px }
main.wrap { padding: 28px 16px 56px; display: flex; flex-direction: column; gap: 28px; flex: 1 }

.band { background: var(--blue); color: #fff }
footer.band { margin-top: auto }
.band-inner { display: flex; align-items: center; gap: 20px; padding: 22px 16px }
.skylt { flex: none; width: 84px; height: 120px; display: block; border-radius: 6px }
h1 { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05 }
.band-sub { font-size: 14px; color: var(--band-muted); margin-top: 4px }
.band-foot { padding: 18px 16px; font-size: 13px; color: var(--band-muted) }

.tiles { display: flex; flex-wrap: wrap; gap: 14px }
.tile { flex: 1 1 200px; background: var(--card); border: 2px solid var(--blue); border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.lbl { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue) }
.num { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums }
.sub { font-size: 13px; color: var(--muted) }
h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--blue); letter-spacing: .01em; text-transform: uppercase }
.card-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px }

.cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch }
.map-card { flex: 999 1 520px }
.side { flex: 1 1 320px; display: flex; flex-direction: column; gap: 20px; min-width: 0 }
#map { flex: 1 1 auto; min-height: 620px; border-radius: 6px; border: 1px solid #C5CED9; background: #DCE4EC }

.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px }
.bar { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0 }
.bar i { display: block; width: 100%; border-radius: 3px 3px 1px 1px; background: var(--blue); min-height: 2px }
.bar i.tom { background: var(--line) }
.bar span { font-size: 11px; color: var(--muted) }
.bar b { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--blue) }

.row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px }
.row:last-child { border-bottom: 0 }
.row b { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--blue) }
#lista-lan .row b { min-width: 7ch; text-align: right } /* lika långa staplar oavsett siffrornas bredd */
.meter { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; margin-top: 5px }
.meter i { display: block; height: 100%; background: var(--blue) }

.kartfilter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.seg { display: inline-flex; border: 1px solid var(--blue); border-radius: 4px; overflow: hidden }
.seg button { font: inherit; font-size: 13px; padding: 3px 10px; border: 0; background: var(--card); color: var(--blue); cursor: pointer }
.seg button + button { border-left: 1px solid var(--blue) }
.seg button[aria-pressed="true"] { background: var(--blue); color: #fff }
.seg button:hover:not([aria-pressed="true"]) { background: var(--line-soft) }
select { font: inherit; font-size: 13px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px }
.scroll { overflow-x: auto }
table { border-collapse: collapse; width: 100%; font-size: 14px }
th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 6px 0; border-bottom: 2px solid var(--blue) }
td { padding: 9px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top }
th:not(:last-child), td:not(:last-child) { padding-right: 20px }
td.m { font-family: 'JetBrains Mono', monospace; white-space: nowrap; color: var(--blue) }

.leaflet-popup-content-wrapper { background: var(--blue); color: #fff; border-radius: 5px; border: 2px solid #fff; font-family: 'Inter Tight', sans-serif }
.leaflet-popup-content { margin: 10px 14px; font-size: 12px; line-height: 1.5 }
.leaflet-popup-content strong { font-size: 14px; display: block }
.leaflet-popup-tip { background: var(--blue) }
.leaflet-container { font-family: inherit }
/* Gråtonad bakgrundskarta så att skyltblått är enda färgen. Påverkar bara kartbilderna. */
#map .leaflet-tile-pane { filter: grayscale(1) contrast(.85) brightness(1.08) }
.leaflet-tooltip.namn { background: none; border: none; box-shadow: none; padding: 0; font-size: 11px; font-weight: 600; color: var(--muted);
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff }
.leaflet-tooltip.namn::before { display: none }