:root{
    --gran:#1d3a2c;        /* djup granskog */
    --gran-ljus:#2c5240;
    --mossa:#5d7a63;
    --bjork:#f3f1e9;       /* björknäver / papper */
    --panel:#fbfaf5;
    --led:#e8641b;         /* orange ledmarkering */
    --led-morkl:#c24f0f;
    --linje:#d9d5c7;
    --text:#22301f;
    --text-svag:#6b7263;
    --radie:10px;
    --handtag-h:38px;      /* höjd på mobilpanelens handtag, även hopfälld */
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* Egna display-regler slår annars ut webbläsarens [hidden], så paneler som
     ska vara hopfällda stod permanent öppna. */
  [hidden]{display:none !important}
  html,body{height:100%}
  body{
    font-family:"Familjen Grotesk",system-ui,sans-serif;
    color:var(--text);
    background:var(--bjork);
    display:flex;
    overflow:hidden;
  }
  /* ---------- Sidopanel ---------- */
  #sidebar{
    width:378px;min-width:378px;height:100%;
    background:var(--panel);
    border-right:1px solid var(--linje);
    display:flex;flex-direction:column;
    z-index:1200;
    overflow-y:auto;
  }
  header{
    background:var(--gran);
    color:var(--bjork);
    padding:22px 24px 18px;
  }
  /* Ledmarkerings-signatur: två orange "målade" band, som på en trädstam */
  .blaze{display:flex;gap:6px;margin-bottom:12px}
  .blaze span{width:34px;height:9px;background:var(--led);border-radius:2px;transform:rotate(-1.5deg)}
  .blaze span:last-child{transform:rotate(1deg)}
  header h1{font-size:26px;font-weight:700;letter-spacing:-0.02em;line-height:1.05}
  header p{font-size:13.5px;margin-top:6px;color:#cfd8cb;line-height:1.45}
  .content{padding:20px 24px 28px;display:flex;flex-direction:column;gap:18px}

  /* Lägesväxel i panelen: A→B eller rundtur. Rundturen låg tidigare som en
     hopfällbar sektion längre ner, vilket dolde att det är ett eget sätt att
     planera – inte en inställning till det andra. */
  .panelval{width:100%}
  .panelval button{flex:1}

  /* Start- och målfält som ett block, med bytknappen mellan dem */
  .punktblock{position:relative;display:flex;flex-direction:column;gap:14px}
  .byt-riktning{
    position:absolute;right:0;top:calc(50% - 15px);z-index:2;
    width:30px;height:30px;border-radius:50%;
    background:#fff;border:1.5px solid var(--linje);
    color:var(--gran-ljus);font-size:14px;line-height:1;cursor:pointer;
    box-shadow:0 1px 3px rgba(0,0,0,.08);
  }
  .byt-riktning:hover{border-color:var(--mossa);color:var(--gran)}
  .byt-riktning:focus-visible{outline:2px solid var(--led);outline-offset:2px}
  /* I rundtursläge finns inget mål att byta med */
  .rundturslage .byt-riktning{display:none}

  /* Liten ikonknapp i fältets etikettrad, i stället för en egen full rad */
  .fält-ikon{
    margin-left:auto;border:none;background:none;cursor:pointer;
    font-size:14px;line-height:1;padding:2px 4px;border-radius:5px;
  }
  .fält-ikon:hover{background:var(--bjork)}
  .fält-ikon:focus-visible{outline:2px solid var(--led);outline-offset:1px}

  .fält{position:relative}
  .fält label{
    display:flex;align-items:center;gap:8px;
    font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
    color:var(--text-svag);margin-bottom:6px;
  }
  .punktmark{
    width:18px;height:18px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:10.5px;font-weight:700;color:#fff;
  }
  .punktmark.a{background:var(--gran-ljus)}
  .punktmark.b{background:var(--led)}
  .fält input{
    width:100%;padding:11px 38px 11px 12px;
    font:inherit;font-size:15px;
    border:1.5px solid var(--linje);border-radius:var(--radie);
    background:#fff;color:var(--text);
    transition:border-color .15s;
  }
  .fält input:focus{outline:none;border-color:var(--gran-ljus)}
  .fält .rensa-fält{
    position:absolute;right:8px;bottom:7px;
    border:none;background:none;cursor:pointer;
    font-size:16px;color:var(--text-svag);padding:4px;line-height:1;
    display:none;
  }
  .fält input:not(:placeholder-shown) ~ .rensa-fält{display:block}
  .förslag{
    position:absolute;left:0;right:0;top:100%;margin-top:4px;
    background:#fff;border:1px solid var(--linje);border-radius:var(--radie);
    box-shadow:0 8px 24px rgba(29,58,44,.14);
    z-index:1500;overflow:hidden;display:none;
  }
  .förslag.öppen{display:block}
  .förslag button{
    display:block;width:100%;text-align:left;
    padding:10px 12px;border:none;background:none;cursor:pointer;
    font:inherit;font-size:14px;color:var(--text);
    border-bottom:1px solid var(--bjork);
  }
  .förslag button:last-child{border-bottom:none}
  .förslag button:hover{background:var(--bjork)}
  .förslag .ort{color:var(--text-svag);font-size:12.5px;display:block;margin-top:2px}
  .förslag-fel{padding:10px 12px;font-size:13px;line-height:1.45;color:var(--text-svag)}

  .rad{display:flex;gap:10px}
  .knapp{
    flex:1;padding:12px 14px;
    font:inherit;font-size:15px;font-weight:600;
    border-radius:var(--radie);border:none;cursor:pointer;
    transition:background .15s, transform .05s;
  }
  .knapp:active{transform:translateY(1px)}
  .knapp.primär{background:var(--led);color:#fff}
  .knapp.primär:hover{background:var(--led-morkl)}
  .knapp.primär:disabled{background:#d8ccc0;cursor:not-allowed}
  .knapp.sekundär{background:none;border:1.5px solid var(--linje);color:var(--text-svag);flex:0 0 auto}
  .knapp.sekundär:hover{border-color:var(--mossa);color:var(--gran)}
  .knapp.sekundär.aktiv{background:var(--gran-ljus);border-color:var(--gran-ljus);color:#fff}
  .leaflet-tooltip{font-family:"Familjen Grotesk",sans-serif;font-size:13px;line-height:1.4}

  .inställning{display:flex;flex-direction:column;gap:6px}
  .inställning label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-svag)}
  .inställning select{
    padding:10px 12px;font:inherit;font-size:14.5px;
    border:1.5px solid var(--linje);border-radius:var(--radie);background:#fff;color:var(--text);
  }
  .växel{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14.5px}
  .växel small{display:block;color:var(--text-svag);font-size:12.5px;margin-top:2px}
  .switch{position:relative;width:44px;height:24px;flex:none}
  .switch input{opacity:0;width:0;height:0}
  .switch i{
    position:absolute;inset:0;border-radius:24px;background:#cfcaba;transition:.15s;cursor:pointer;
  }
  .switch i::after{
    content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
    background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.25);
  }
  .switch input:checked + i{background:var(--gran-ljus)}
  .switch input:checked + i::after{left:23px}
  .switch input:focus-visible + i{outline:2px solid var(--led);outline-offset:2px}

  #viaLista{display:flex;flex-wrap:wrap;gap:6px}
  #viaLista:empty{display:none}
  .via-chip{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--bjork);border:1px solid var(--linje);border-radius:20px;
    padding:5px 6px 5px 11px;font-size:13px;color:var(--text);
  }
  .via-chip button{border:none;background:var(--linje);border-radius:50%;width:18px;height:18px;cursor:pointer;font-size:11px;line-height:1;color:var(--text)}
  .via-chip button:hover{background:var(--led);color:#fff}

  #status{
    font-size:14px;line-height:1.5;color:var(--text-svag);
    border-left:3px solid var(--linje);padding:2px 0 2px 12px;
  }
  #status.fel{border-color:#c0392b;color:#8c2f22}
  #status.laddar{border-color:var(--led);color:var(--text)}

  #resultat{display:none;flex-direction:column;gap:12px}
  #resultat.visas{display:flex}
  .statgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .stat{
    background:#fff;border:1px solid var(--linje);border-radius:var(--radie);
    padding:10px 10px;min-width:0;
  }
  .stat b{
    display:block;font-family:"IBM Plex Mono",monospace;font-weight:500;color:var(--gran);
    /* "2 h 30 min" bröt till två rader och gjorde rutan dubbelt så hög.
       14,5 px är den största storlek där tio tecken ryms i en tredjedels
       panelbredd. */
    font-size:14.5px;white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  .stat span{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-svag)}
  .not{font-size:12.5px;color:var(--text-svag);line-height:1.5}
  .not a{color:var(--gran-ljus)}

  .källor{border-top:1px solid var(--linje);padding-top:14px;font-size:12.5px;color:var(--text-svag);line-height:1.65}
  .källor a{color:var(--gran-ljus)}
  .källor strong{color:var(--text)}

  /* Fördelning per vägtyp */
  #fördelning{display:flex;flex-direction:column;gap:8px}
  .förd-rad{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px;font-size:13.5px}
  .förd-rad .prov{height:5px;border-radius:3px}
  .förd-rad .namn{color:var(--text)}
  .förd-rad .km{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--text-svag)}
  .förd-stapel{grid-column:1 / -1;height:5px;border-radius:3px;background:var(--bjork);overflow:hidden}
  .förd-stapel i{display:block;height:100%;border-radius:3px}

  /* POI-filter */
  .poi-val{display:flex;flex-wrap:wrap;gap:7px}
  .poi-chip{position:relative;cursor:pointer}
  .poi-chip input{position:absolute;opacity:0;pointer-events:none}
  .poi-chip span{
    display:inline-block;padding:6px 12px;
    border:1.5px solid var(--linje);border-radius:20px;
    background:#fff;font-size:13.5px;color:var(--text);
    transition:background .12s, border-color .12s;
    user-select:none;
  }
  .poi-chip:hover span{border-color:var(--mossa)}
  .poi-chip input:checked + span{background:var(--gran-ljus);border-color:var(--gran-ljus);color:#fff}
  .poi-chip input:focus-visible + span{outline:2px solid var(--led);outline-offset:2px}
  #poiNote:empty{display:none}
  .poi-ikon{
    width:27px;height:27px;border-radius:50%;
    background:#fff;border:1.5px solid var(--linje);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;box-shadow:0 1px 4px rgba(0,0,0,.3);
  }

  /* Höjdprofil */
  /* Hopfällbara grupper i panelen. Panelen hade sexton likvärdiga block i rad
     och var 3,7 skärmar hög; inställningar man sällan rör låg mellan
     startfälten och Beräkna-knappen. */
  .grupp{border:1px solid var(--linje);border-radius:var(--radie);background:#fff}
  .grupp > summary{
    display:flex;align-items:center;gap:8px;
    padding:11px 13px;cursor:pointer;list-style:none;
    font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--text-svag);border-radius:var(--radie);
  }
  .grupp > summary::-webkit-details-marker{display:none}
  .grupp > summary::after{
    content:"▾";margin-left:auto;font-size:11px;transition:transform .15s;
  }
  .grupp[open] > summary::after{transform:rotate(180deg)}
  .grupp > summary:hover{color:var(--gran)}
  .grupp > summary:focus-visible{outline:2px solid var(--led);outline-offset:-2px}
  .grupp[open] > summary{border-bottom:1px solid var(--linje);border-radius:var(--radie) var(--radie) 0 0}
  .grupp-kropp{display:flex;flex-direction:column;gap:16px;padding:14px 13px}

  /* Mindre detaljblock inuti resultatet */
  .detalj{border-top:1px solid var(--linje);padding-top:10px}
  .detalj > summary{
    cursor:pointer;list-style:none;font-size:13px;color:var(--gran-ljus);
  }
  .detalj > summary::-webkit-details-marker{display:none}
  .detalj > summary::before{content:"▸ ";font-size:10px}
  .detalj[open] > summary::before{content:"▾ "}
  .detalj > summary:focus-visible{outline:2px solid var(--led);outline-offset:2px}
  .detalj-kropp{display:flex;flex-direction:column;gap:12px;padding-top:12px}

  /* Anpassa ruttprioriteringen */
  .anpassa-toggle{
    width:100%;text-align:left;cursor:pointer;
    padding:9px 12px;font:inherit;font-size:13.5px;
    background:none;color:var(--gran-ljus);
    border:1.5px dashed var(--linje);border-radius:var(--radie);
  }
  .anpassa-toggle:hover{border-color:var(--mossa);background:var(--bjork)}
  .anpassa-toggle[aria-expanded="true"]{border-style:solid;background:var(--bjork)}
  .anpassa-panel{
    display:flex;flex-direction:column;gap:10px;
    padding:12px;margin-top:2px;
    background:var(--bjork);border-radius:var(--radie);
  }
  .prio-lista{list-style:none;display:flex;flex-direction:column;gap:5px}
  .prio-rad{
    display:flex;align-items:center;gap:9px;
    background:#fff;border:1px solid var(--linje);border-radius:8px;
    padding:7px 8px 7px 10px;font-size:13.5px;
  }
  .prio-nr{
    flex:none;width:19px;height:19px;border-radius:50%;
    background:var(--gran-ljus);color:#fff;
    font-size:11px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  .prio-rad:first-child .prio-nr{background:var(--led)}
  .prio-namn{flex:1;min-width:0}
  .prio-rad button{
    flex:none;width:26px;height:26px;cursor:pointer;
    border:1px solid var(--linje);border-radius:6px;background:#fff;
    color:var(--gran-ljus);font-size:11px;line-height:1;
  }
  .prio-rad button:hover:not(:disabled){border-color:var(--mossa);background:var(--bjork)}
  .prio-rad button:disabled{opacity:.3;cursor:default}
  .prio-rad button:focus-visible{outline:2px solid var(--led);outline-offset:1px}

  .undvik-val{display:flex;flex-direction:column;gap:6px}
  .undvik-rad{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
  .undvik-rad input{width:16px;height:16px;accent-color:var(--gran-ljus);cursor:pointer}

  /* Mina turer – sparade rutter i webbläsaren */
  .turer{display:flex;flex-direction:column;gap:5px}
  .turer:empty::after{
    content:"Inga sparade turer än. Beräkna en rutt och tryck ☆ Spara den här turen.";
    font-size:12.5px;color:var(--text-svag);line-height:1.5;
  }
  .tur-rad{display:flex;align-items:center;gap:6px}
  .tur-ladda{
    flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;
    text-align:left;padding:7px 10px;font:inherit;cursor:pointer;
    background:#fff;border:1px solid var(--linje);border-radius:8px;color:var(--text);
  }
  .tur-ladda:hover{border-color:var(--mossa)}
  .tur-ladda:focus-visible{outline:2px solid var(--led);outline-offset:1px}
  .tur-namn{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tur-meta{font-size:11.5px;color:var(--text-svag)}
  .tur-bort{
    flex:none;width:28px;height:28px;cursor:pointer;
    border:1px solid var(--linje);border-radius:7px;background:#fff;
    color:var(--text-svag);font-size:13px;line-height:1;
  }
  .tur-bort:hover{border-color:#b4544a;color:#b4544a}
  .tur-bort:focus-visible{outline:2px solid var(--led);outline-offset:1px}

  /* Leder i kartvyn när man är för utzoomad för etiketter */
  .ledlista{
    display:flex;flex-direction:column;gap:8px;
    background:var(--bjork);border-radius:var(--radie);padding:12px;
  }
  .ledlista.dold{display:none}
  .ledlista h3{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-svag)}
  .ledlista small{font-size:12px;color:var(--text-svag);line-height:1.4}
  .ledlista-rader{display:flex;flex-direction:column;gap:4px}
  .ledlista-rad{
    display:flex;align-items:center;gap:8px;width:100%;text-align:left;
    padding:6px 8px;font:inherit;font-size:13.5px;cursor:pointer;
    background:#fff;border:1px solid var(--linje);border-radius:7px;color:var(--text);
  }
  .ledlista-rad:hover{border-color:var(--mossa)}
  .ledlista-rad:focus-visible{outline:2px solid var(--led);outline-offset:1px}
  .ledlista-namn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ledlista-grupp{
    flex:none;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
    padding:2px 5px;border-radius:3px;color:#fff;background:var(--mossa);
  }
  .ledlista-grupp.g-INT,.ledlista-grupp.g-IWN{background:var(--led)}
  .ledlista-grupp.g-NAT{background:var(--gran)}
  .ledlista-grupp.g-REG{background:var(--gran-ljus)}

  /* Rundtur */
  #rundturVal{display:flex;flex-direction:column;gap:8px}
  .rundtur-langd{font-size:13px;color:var(--text-svag)}
  .rundtur-rad{display:flex;align-items:center;gap:12px}
  .rundtur-rad input[type=range]{flex:1;accent-color:var(--led);cursor:pointer}
  #rundturVarde{
    flex:none;min-width:56px;text-align:right;
    font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:500;
    font-variant-numeric:tabular-nums;color:var(--gran);
  }

  /* Förklaring och lista över ruttförslag */
  .rutt-forklaring{
    font-size:13.5px;line-height:1.5;color:var(--gran-ljus);
    background:var(--bjork);border-radius:var(--radie);padding:9px 12px;
  }
  .rutt-forklaring:empty{display:none}

  .alt-lista{display:flex;flex-direction:column;gap:6px}
  .alt-lista:empty{display:none}
  .alt-rad{
    display:flex;flex-direction:column;gap:2px;
    width:100%;text-align:left;cursor:pointer;
    padding:9px 12px;font:inherit;
    background:#fff;color:var(--text);
    border:1.5px solid var(--linje);border-radius:var(--radie);
  }
  .alt-rad:hover{border-color:var(--mossa)}
  .alt-rad.vald{border-color:var(--led);background:#fff7f2}
  .alt-rad:focus-visible{outline:2px solid var(--led);outline-offset:2px}
  .alt-topp{display:flex;align-items:baseline;gap:8px}
  .alt-topp b{font-size:15px}
  .alt-stig{margin-left:auto;font-size:12.5px;color:var(--text-svag)}
  .alt-marke{
    font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
    color:var(--led-morkl);background:#fdeee4;padding:2px 6px;border-radius:4px;
  }
  .alt-rad small{font-size:12.5px;color:var(--text-svag)}

  #höjdprofil{background:#fff;border:1px solid var(--linje);border-radius:var(--radie);padding:8px 6px 2px}
  #höjdprofil:empty{display:none}
  #höjdprofil svg{display:block;width:100%;height:auto;touch-action:pan-y}
  #höjdprofil text{font-family:"IBM Plex Mono",monospace}

  /* Följ mig-panel */
  #följInfo{
    position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
    background:rgba(29,58,44,.94);color:var(--bjork);
    font-size:14px;line-height:1.5;text-align:center;
    padding:9px 18px;border-radius:12px;
    z-index:1100;max-width:92%;
    box-shadow:0 4px 16px rgba(0,0,0,.3);
  }
  #följInfo.dold{display:none}
  #följInfo b{color:#fff}
  #följInfo .varning{color:#ffb27a}

  /* Egen position */
  .pos-punkt{
    width:16px;height:16px;border-radius:50%;
    background:#2b7de9;border:2.5px solid #fff;
    box-shadow:0 0 6px rgba(43,125,233,.9);
  }
  @media (prefers-reduced-motion: no-preference){
    .pos-punkt::after{
      content:"";position:absolute;inset:-8px;border-radius:50%;
      border:2px solid rgba(43,125,233,.5);
      animation:pos-puls 2s ease-out infinite;
    }
    @keyframes pos-puls{
      0%{transform:scale(.5);opacity:1}
      100%{transform:scale(1.4);opacity:0}
    }
  }
  a.pos-knapp{font-size:15px;text-decoration:none}
  a.pos-knapp.aktiv{background:#2b7de9 !important;color:#fff}

  /* Stöd utvecklaren */
  .stöd{margin-top:2px}
  .stöd-toggle{
    width:100%;padding:11px 14px;
    font:inherit;font-size:14px;font-weight:600;cursor:pointer;
    background:#fdf6ec;color:#8a5a1e;
    border:1.5px dashed #d9b98a;border-radius:var(--radie);
    transition:background .15s;
    text-align:left;
  }
  .stöd-toggle:hover{background:#faeeda}
  .stöd-panel{
    margin-top:8px;padding:14px;
    background:#fdf6ec;border:1.5px dashed #d9b98a;border-radius:var(--radie);
    display:flex;flex-direction:column;gap:10px;
  }
  .stöd-panel p{font-size:13.5px;line-height:1.55;color:#6b5133}
  .stöd-knapp{
    display:block;text-align:center;text-decoration:none;
    padding:11px;border-radius:var(--radie);
    font-size:14.5px;font-weight:600;
  }
  .stöd-knapp.swish{background:#e8641b;color:#fff}
  .stöd-knapp.swish:hover{background:var(--led-morkl)}
  .stöd-knapp.kofi{background:#fff;color:#8a5a1e;border:1.5px solid #d9b98a}
  .stöd-knapp.kofi:hover{border-color:#8a5a1e}
  .stöd-qr{display:flex;align-items:center;gap:12px}
  .stöd-qr #swishQr{background:#fff;padding:6px;border-radius:8px;border:1px solid #eadcc5;line-height:0}
  .stöd-qr small{font-size:12px;color:#6b5133;line-height:1.5}
  .stöd-not{text-align:center;color:#a8863f;font-size:12px}
  .förslag-länk{
    display:block;margin-top:10px;text-align:center;
    font-size:13px;color:var(--gran-ljus);text-decoration:none;
    padding:8px;border-radius:var(--radie);
  }
  .förslag-länk:hover{background:var(--bjork);text-decoration:underline}

  /* Lägesväxel och sökfält i kartan */
  .kart-panel{
    position:absolute;top:12px;left:12px;z-index:1150;
    display:flex;flex-direction:column;gap:8px;width:270px;max-width:calc(100% - 24px);
  }
  .lagevaxel{
    display:flex;background:rgba(251,250,245,.96);
    border:1px solid var(--linje);border-radius:22px;padding:3px;
    box-shadow:0 2px 10px rgba(29,58,44,.18);
  }
  .lagevaxel button{
    flex:1;border:none;background:none;cursor:pointer;
    font:inherit;font-size:13px;font-weight:600;color:var(--text-svag);
    padding:7px 10px;border-radius:20px;transition:background .15s,color .15s;
    white-space:nowrap;
  }
  .lagevaxel button.aktiv{background:var(--gran-ljus);color:#fff}
  .lagevaxel button.aktiv.planera{background:var(--led)}
  .karta-planerar #map{box-shadow:inset 0 0 0 3px var(--led)}

  .kartsok{position:relative}
  .kartsok input{
    width:100%;padding:10px 34px 10px 12px;
    font:inherit;font-size:14px;
    border:1px solid var(--linje);border-radius:var(--radie);
    background:rgba(255,255,255,.97);color:var(--text);
    box-shadow:0 2px 10px rgba(29,58,44,.18);
  }
  .kartsok input:focus{outline:none;border-color:var(--gran-ljus)}
  .kartsok .sok-ikon{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    font-size:13px;color:var(--text-svag);pointer-events:none;
  }
  .kartsok .förslag{box-shadow:0 8px 24px rgba(29,58,44,.25)}
  .sok-popup-knappar{display:flex;gap:6px;margin-top:8px}
  .sok-popup-knappar button{
    flex:1;padding:7px 8px;font:inherit;font-size:12.5px;font-weight:600;
    border:none;border-radius:7px;cursor:pointer;color:#fff;
  }
  .sok-popup-knappar .start{background:var(--gran-ljus)}
  .sok-popup-knappar .mal{background:var(--led)}
  .sok-markor{
    width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
    background:#8b8f80;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);
  }

  /* Laddindikator i kartan – visar vad som fortfarande hämtas för aktuell vy */
  .kart-laddar{
    display:flex;align-items:center;gap:8px;
    align-self:flex-start;
    background:rgba(251,250,245,.96);
    border:1px solid var(--linje);border-radius:20px;
    padding:7px 13px 7px 10px;
    font-size:12.5px;font-weight:500;color:var(--gran);
    box-shadow:0 2px 8px rgba(0,0,0,.16);
    pointer-events:none;
  }
  .kart-laddar.dold{display:none}

  /* Lagermeny i kartan. Ersätter Leaflets inbyggda lagerkontroll och samlar
     bakgrundskarta, ledlager och platsval på ett ställe – tidigare låg de
     utspridda mellan kartkontrollen och sidopanelen. */
  .lagerpanel{position:absolute;top:12px;right:12px;z-index:1150;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
  .lager-knapp{
    width:40px;height:40px;flex:none;cursor:pointer;
    background:rgba(251,250,245,.96);
    border:1px solid var(--linje);border-radius:var(--radie);
    font-size:17px;line-height:1;color:var(--gran);
    box-shadow:0 2px 8px rgba(0,0,0,.18);
  }
  .lager-knapp:hover{background:#fff;border-color:var(--mossa)}
  .lager-knapp[aria-expanded="true"]{background:var(--gran);color:var(--bjork);border-color:var(--gran)}
  .lager-knapp:focus-visible{outline:2px solid var(--led);outline-offset:2px}
  .lager-meny{
    width:246px;max-width:calc(100vw - 24px);
    max-height:calc(100% - 60px);overflow-y:auto;
    display:flex;flex-direction:column;gap:14px;
    background:rgba(251,250,245,.98);
    border:1px solid var(--linje);border-radius:var(--radie);
    padding:14px;box-shadow:0 6px 24px rgba(29,58,44,.22);
  }
  .lager-grupp{display:flex;flex-direction:column;gap:7px}
  .lager-grupp h3{
    font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
    color:var(--text-svag);
  }
  .lager-rad{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
  .lager-rad input{width:15px;height:15px;accent-color:var(--gran-ljus);cursor:pointer}
  .sr-endast{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  @media (max-width: 760px){
    .lagerpanel{top:auto;bottom:12px;right:12px}
    .lager-meny{max-height:60vh}
  }

  /* Ledinfon är ett komplement – när den inte går att hämta ska det synas,
     men inte se ut som att hela appen är trasig. */
  .kart-fel{
    align-self:flex-start;max-width:100%;
    background:rgba(251,250,245,.97);
    border:1px solid var(--linje);border-left:3px solid var(--led);
    border-radius:var(--radie);
    padding:9px 13px;
    font-size:12.5px;line-height:1.45;color:var(--text-svag);
    box-shadow:0 2px 8px rgba(0,0,0,.16);
  }
  .kart-fel.dold{display:none}

  /* Vägvisare längs lederna */
  .vagvisare{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#fff;border:1.5px solid var(--mossa);
    font-size:11px;box-shadow:0 1px 3px rgba(0,0,0,.28);
  }
  .laddsnurra{
    flex:none;width:14px;height:14px;border-radius:50%;
    border:2px solid var(--linje);border-top-color:var(--led);
    animation:snurra .8s linear infinite;
  }
  @keyframes snurra{to{transform:rotate(360deg)}}

  /* Klickbar etikett på leder – namnet syns direkt så det framgår vad man trycker på */
  .led-info-ankare{width:0 !important;height:0 !important;overflow:visible}
  .led-info-knapp{
    position:absolute;left:0;top:0;transform:translate(-50%,-50%);
    display:inline-flex;align-items:center;gap:6px;
    max-width:210px;padding:5px 12px 5px 8px;
    border-radius:16px;white-space:nowrap;
    background:#fff;border:2px solid var(--led);
    color:var(--gran);font-size:12.5px;font-weight:600;
    box-shadow:0 2px 7px rgba(0,0,0,.32);
    cursor:pointer;
  }
  .led-info-knapp:hover,.led-info-knapp:focus-visible{background:var(--led);color:#fff}
  .led-info-namn{overflow:hidden;text-overflow:ellipsis}
  .led-info-pil{font-size:10px;opacity:.65}

  /* Faktaruta om leden i popupen */
  .led-popup b.led-titel{color:var(--led);font-size:14px}
  .led-fakta{
    list-style:none;margin:7px 0 0;padding:7px 0 0;
    border-top:1px solid var(--linje);
    font-size:12.5px;line-height:1.5;
  }
  .led-fakta li{display:flex;justify-content:space-between;gap:12px}
  .led-fakta li span:first-child{color:var(--text-svag)}
  .led-fakta li span:last-child{font-weight:600;text-align:right}
  .led-not{display:block;margin-top:7px;color:var(--text-svag);line-height:1.4}
  .led-valj{width:100%;margin-top:10px;font-size:13.5px;padding:9px 12px}

  /* Teckenförklaring i kartan */
  .legend{
    background:rgba(251,250,245,.95);
    border:1px solid var(--linje);border-radius:var(--radie);
    padding:10px 14px;font-size:13px;line-height:1.4;
    box-shadow:0 2px 10px rgba(29,58,44,.15);
  }
  .legend h4{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-svag);margin-bottom:7px;font-weight:600}
  .legend div{display:flex;align-items:center;gap:8px;margin-bottom:4px}
  .legend div:last-child{margin-bottom:0}
  .legend svg{flex:none}

  /* Rubrik som bara finns för skärmläsare – ger resultatblocket en egen nivå
     i dokumentstrukturen utan att ändra hur panelen ser ut. */
  .rubrik-resultat{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }

  /* Ruttens glöd och riktningsflöde */
  .rutt-glod{filter:url(#ruttGlod)}
  .rutt-glod.puls{animation:ruttPuls 1.1s ease-out 2}
  @keyframes ruttPuls{
    0%,100%{stroke-opacity:.4}
    50%    {stroke-opacity:.85; stroke-width:22}
  }
  .rutt-flode{animation:ruttFlode 1.6s linear infinite}
  @keyframes ruttFlode{ to{stroke-dashoffset:-26} }
  .rutt-pil{
    width:18px;height:18px;line-height:18px;text-align:center;
    font-size:12px;color:#fff;
    text-shadow:0 0 3px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.6);
    pointer-events:none;
  }

  /* ---------- Karta ---------- */
  #map{flex:1;height:100%;min-height:320px;z-index:1}
  .leaflet-container{font-family:"Familjen Grotesk",sans-serif;background:#e6e8dd}
  .marker-a,.marker-b,.marker-via{
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:700;font-size:13px;
    border-radius:50% 50% 50% 0;transform:rotate(-45deg);
    box-shadow:0 2px 6px rgba(0,0,0,.35);
    border:2px solid #fff;
  }
  .marker-a{background:var(--gran-ljus)}
  .marker-b{background:var(--led)}
  .marker-via{background:var(--mossa);font-size:12.5px}
  .marker-a span,.marker-b span,.marker-via span{transform:rotate(45deg)}

  #kartTips{
    position:absolute;top:12px;left:50%;transform:translateX(-50%);
    background:rgba(29,58,44,.92);color:var(--bjork);
    font-size:13.5px;padding:8px 16px;border-radius:24px;
    z-index:1100;pointer-events:none;white-space:nowrap;
    transition:opacity .3s;
  }
  #kartTips.dold{opacity:0}
  .kartwrap{position:relative;flex:1;display:flex}

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important}
    /* Snurran står still – texten bredvid bär informationen ändå */
    .laddsnurra{animation:none;border-top-color:var(--led);border-right-color:var(--led)}
    /* Rutten behåller glöden men slutar röra sig */
    .rutt-glod.puls,.rutt-flode{animation:none}
  }
  /* Handtag för att fälla ner panelen på mobil, så hela kartan syns.
     På bredare skärmar ligger panelen vid sidan och behöver inte fällas. */
  .panel-handtag{display:none}

  @media (max-width: 760px){
    body{flex-direction:column}
    #sidebar{
      width:100%;min-width:0;max-height:52%;order:2;
      border-right:none;border-top:1px solid var(--linje);
      transition:max-height .25s ease;
    }
    .kartwrap{order:1;min-height:48%}

    .panel-handtag{
      position:sticky;top:0;z-index:3;
      display:flex;align-items:center;justify-content:center;
      width:100%;height:var(--handtag-h);flex:none;
      padding:6px 12px 0;
      background:var(--panel);border:none;
      border-bottom:1px solid var(--linje);
      font-family:inherit;font-size:12px;font-weight:600;
      letter-spacing:.06em;text-transform:uppercase;
      color:var(--text-svag);cursor:pointer;
    }
    /* Litet grepp-streck överst, samma visuella språk som draglådor i appar */
    .panel-handtag::before{
      content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);
      width:36px;height:4px;border-radius:2px;background:var(--linje);
    }
    .panel-handtag:focus-visible{outline:2px solid var(--led);outline-offset:-3px}

    body.panel-nedfalld #sidebar{max-height:var(--handtag-h);overflow:hidden}
    body.panel-nedfalld .kartwrap{min-height:0}
    header{padding:14px 18px 12px}
    header h1{font-size:21px}
    header p{display:none}
    .content{padding:14px 18px 20px;gap:14px}
    #kartTips{font-size:12px;max-width:92%;white-space:normal;text-align:center;top:auto;bottom:12px}
    .kart-panel{width:calc(100% - 24px)}
    .lagevaxel button{font-size:12.5px;padding:8px 6px}
  }