:root {
  --bg: #f7f7f8;
  --fg: #1a1a1f;
  --muted: #6b6b75;
  --border: #d9d9df;
  --corridor: #4080ff;
  --alt-corridor: #a06030;
  --svk-inom: #ff4000;
  --svk-0-200: #ff8030;
  --svk-200-1000: #ffb070;
  --svk-over-1000: #ffd0a0;
  --fastigheter: #009060;
  --lm-inom: #004848;
  --lm-0-200: #007878;
  --lm-200-1000: #40a8a8;
  --lm-over-1000: #90d0d0;
  --alt-lm-inom: #704000;
  --alt-lm-0-200: #a06010;
  --alt-lm-200-1000: #c89050;
  --alt-lm-over-1000: #e8c890;
  --existing-line: #6010a0;
  --convergence: #d61c5e;
  --saved: #006040;
  --worsened: #a02020;
  --bostad: #205090;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
  background: var(--bg);
}

body {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: 100vh;
}

#sidebar {
  overflow-y: auto;
  background: white;
  border-right: 1px solid var(--border);
  padding: 0;
}

#sidebar header {
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: white;
  z-index: 2;
}

h1 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.lead {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

#sidebar-toggle {
  display: none;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 1.25rem;
  cursor: pointer;
}

/* Sammanfattningspanel — saklig jämförelse SvK vs alt */
.hero {
  padding: 0.85rem 1.25rem;
  background: #fafafa;
  border-bottom: 1px solid var(--border);
}

.hero-headline {
  text-align: center;
  margin-bottom: 0.5rem;
}

.hero-compare {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
}

.hero-num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.hero-num-alt {
  color: var(--alt-corridor);
}

.hero-arrow {
  font-size: 1.4rem;
  color: var(--muted);
  font-weight: 300;
}

.hero-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.hero-sub {
  font-size: 0.78rem;
  color: var(--fg);
  margin-top: 0.35rem;
  line-height: 1.35;
}

.hero-meta {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 0.4rem;
  line-height: 1.4;
}

.hero-details {
  font-size: 0.75rem;
}

.hero-details summary {
  cursor: pointer;
  color: var(--muted);
  padding: 0.2rem 0;
  user-select: none;
}

.hero-details summary:hover {
  color: var(--fg);
}

table.hero-kpi {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.4rem;
  font-size: 0.75rem;
}

table.hero-kpi td {
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

table.hero-kpi td:first-child {
  color: var(--muted);
  width: 55%;
  padding-right: 0.5rem;
}

table.hero-kpi td:last-child {
  text-align: right;
}

.hero-pct {
  color: var(--muted);
  font-size: 0.7rem;
}

/* Vy-toggles */
.views {
  padding: 0.6rem 1.25rem;
  background: white;
  border-bottom: 1px solid var(--border);
}

.views h2 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 0.4rem;
}

.view-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.82rem;
  cursor: pointer;
  user-select: none;
}

.view-toggle input {
  margin: 0.15rem 0 0;
  flex-shrink: 0;
}

.view-toggle-text {
  flex: 1;
  line-height: 1.35;
}

.view-toggle .count {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  margin-left: 0.25rem;
}

.reset-btn {
  margin-top: 0.35rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--muted);
  width: 100%;
}

.reset-btn:hover {
  color: var(--fg);
  border-color: var(--muted);
}

.swatch.view-svk-only {
  background: var(--lm-0-200);
  border-color: var(--lm-0-200);
  margin-top: 0.15rem;
}

.swatch.view-bostad {
  background: var(--bostad);
  border-color: var(--bostad);
  border-radius: 3px;
  margin-top: 0.15rem;
}

/* Befintlig 400 kV-ledning (lila streckad linje) + konvergenspunkter (rosa) */
.swatch.existing-line {
  background: var(--existing-line);
  border-radius: 2px;
  height: 3px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.swatch.convergence-points {
  background: var(--convergence);
  border-radius: 50%;
  border-width: 2px;
}

/* Faktisk ledningsgata = mörk lila ifylld polygon. Vi visar swatchen som
   en tunn rektangel med samma färg+opacity som ritas på kartan, så det
   är lätt att förstå vad lagret representerar. */
.swatch.actual-ledningsgata {
  background: var(--existing-line);
  opacity: 0.55;
  border-radius: 1px;
  border: 1px solid #3a0860;
  height: 6px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.filters {
  padding: 0.75rem 1.25rem 1rem;
}

.filters h2 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.filters h3 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 1rem 0 0.4rem;
}

.layer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
}

.layer input {
  margin: 0;
}

.layer-label {
  flex: 1;
  line-height: 1.35;
}

/* (i) — förklaringar för allmänheten */
.info-tip-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.15rem;
}

.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #f0f0f4;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  flex-shrink: 0;
}

.info-tip:hover,
.info-tip:focus {
  background: #e4e4ea;
  color: var(--fg);
  outline: none;
}

.info-tip-bubble {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  padding: 0.45rem 0.55rem;
  background: var(--fg);
  color: white;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.35;
  border-radius: 4px;
  z-index: 10;
  text-align: left;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.info-tip-wrap:hover .info-tip-bubble,
.info-tip-wrap:focus-within .info-tip-bubble {
  display: block;
}

.filters h3 .info-tip-wrap {
  margin-left: 0.25rem;
}

.hero-label .info-tip-wrap {
  margin-left: 0.2rem;
}

.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.swatch.corridor { background: var(--corridor); opacity: 0.5; }
.swatch.alt-corridor { background: var(--alt-corridor); opacity: 0.6; }
.swatch.svk-inom,
.swatch.svk-0-200,
.swatch.svk-200-1000,
.swatch.svk-over-1000 {
  border-radius: 2px;  /* SvK Bostäder = fyrkanter */
}
.swatch.svk-inom { background: var(--svk-inom); }
.swatch.svk-0-200 { background: var(--svk-0-200); }
.swatch.svk-200-1000 { background: var(--svk-200-1000); }
.swatch.svk-over-1000 { background: var(--svk-over-1000); }
.swatch.fastigheter { background: var(--fastigheter); border-radius: 2px; }
/* SvK-LM-byggnader = ifyllda diamanter (polygoner på kartan). */
.swatch.lm-inom,
.swatch.lm-0-200,
.swatch.lm-200-1000,
.swatch.lm-over-1000 {
  border-radius: 2px;
  transform: rotate(45deg) scale(0.85);
}
.swatch.lm-inom { background: var(--lm-inom); }
.swatch.lm-0-200 { background: var(--lm-0-200); }
.swatch.lm-200-1000 { background: var(--lm-200-1000); }
.swatch.lm-over-1000 { background: var(--lm-over-1000); }

/* Alt-LM-byggnader = stroke-only på kartan, så vi visar dem som hollow diamanter
   i panelen för att matcha den visuella stilen (ram runt SvK-byggnad). */
.swatch.alt-lm-inom,
.swatch.alt-lm-0-200,
.swatch.alt-lm-200-1000,
.swatch.alt-lm-over-1000 {
  border-radius: 2px;
  transform: rotate(45deg) scale(0.85);
  background: transparent !important;
  border-width: 2px;
}
.swatch.alt-lm-inom { border-color: var(--alt-lm-inom); }
.swatch.alt-lm-0-200 { border-color: var(--alt-lm-0-200); }
.swatch.alt-lm-200-1000 { border-color: var(--alt-lm-200-1000); }
.swatch.alt-lm-over-1000 { border-color: var(--alt-lm-over-1000); }

/* Jämförelsetabell: SvK vs alt (Y-band-filtrerad rättvis jämförelse) */
table.compare {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}
table.compare th,
table.compare td {
  text-align: left;
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid var(--border);
}
table.compare th { color: var(--muted); font-weight: 500; text-align: right; }
table.compare th:first-child { text-align: left; }
table.compare td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.compare td.diff-down { color: #006040; font-weight: 600; }  /* alt < svk = bra */
table.compare td.diff-up { color: #a02020; font-weight: 600; }    /* alt > svk = sämre */
table.compare tr.total td { font-weight: 600; border-top: 2px solid var(--border); }

p.compare-meta {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.35;
}

.count {
  color: var(--muted);
  font-size: 0.75rem;
  margin-left: auto;
}

.layer-sum {
  margin: 0.35rem 0 0.75rem;
  padding-left: 1.65rem;
  font-size: 0.78rem;
  color: var(--fg);
}

.layer-sum-hint {
  color: var(--muted);
  font-size: 0.72rem;
}

#sidebar footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted);
}

#sidebar footer ul {
  padding-left: 1rem;
  margin: 0.5rem 0;
}

#sidebar footer .meta {
  font-style: italic;
  margin: 0.75rem 0 0;
}

#sidebar footer a {
  color: var(--muted);
}

#map {
  height: 100%;
  width: 100%;
}

/* InfoWindow innehåll */
.popup-title {
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.popup-row {
  font-size: 0.85rem;
  color: var(--fg);
  margin: 0.1rem 0;
}

.popup-row strong {
  color: var(--muted);
  font-weight: 500;
  margin-right: 0.3rem;
}

.popup-row.improvement {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
  font-weight: 500;
}

.popup-row.improvement.good { color: var(--saved); }
.popup-row.improvement.bad { color: var(--worsened); }

/* Etiketter på konvergenspunkter (Google Maps Marker label) */
.convergence-label {
  background: white;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--convergence);
  margin-top: 20px !important;
  white-space: nowrap;
}

/* SvK trolig ledningsgata = röd ifylld remsa (matchar kartan) */
.swatch.svk-gata {
  background: var(--svk-inom);
  opacity: 0.6;
  border-radius: 1px;
  border: 1px solid #a02000;
  height: 6px;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Fotnotsmarkör (*) i tabeller + förklaring */
.fn-mark {
  color: var(--worsened);
  font-weight: 700;
  margin-left: 1px;
}

/* Hopfällbara "Avancerat" / "Teknisk detalj"-sektioner */
details.advanced {
  margin: 0.5rem 0;
}

details.advanced > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 0.35rem 0;
  user-select: none;
  list-style-position: inside;
}

details.advanced > summary:hover {
  color: var(--fg);
}

/* Läsbarhet för allmän publik — något större text på nyckelelement */
.lead { font-size: 0.92rem; line-height: 1.4; }
.hero-label { font-size: 0.92rem; }
.hero-sub {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
  margin-top: 0.45rem;
}
.hero-meta { font-size: 0.78rem; }
.view-toggle { font-size: 0.9rem; }
.layer { font-size: 0.92rem; }
table.compare { font-size: 0.86rem; }
p.compare-meta { font-size: 0.8rem; }

/* Mobil */
@media (max-width: 720px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  #sidebar {
    max-height: 45vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  #sidebar.collapsed {
    max-height: 3.5rem;
    overflow: hidden;
  }

  #sidebar-toggle {
    display: block;
  }

  /* Hero blir kompaktare på mobil så filter+karta får plats */
  .hero {
    padding: 0.5rem 1rem;
  }

  .hero-num {
    font-size: 1.5rem;
  }

  .hero-label {
    font-size: 0.72rem;
  }

  .hero-sub {
    font-size: 0.68rem;
  }

  .hero-meta {
    font-size: 0.65rem;
    margin-bottom: 0.25rem;
  }
}