/* Bykort – styling */
:root{
    --panel: rgba(18,20,26,.82);
    --panel-border: rgba(255,255,255,.08);
    --text:#ececec; --muted:#9aa0ad; --accent:#f2b76b;
    --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  html,body{margin:0;height:100%;background:#0b0d12;color:var(--text);font-family:var(--font)}
  #map{position:absolute;inset:0}
  .ui{position:absolute;z-index:5;backdrop-filter:blur(10px);background:var(--panel);
      border:1px solid var(--panel-border);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
  #title{top:20px;left:20px;padding:16px 20px;max-width:340px}
  #title h1{margin:0;font-size:22px;font-weight:600;letter-spacing:.2px}
  #title h1 small{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:4px;letter-spacing:.6px;text-transform:uppercase}
  #title p{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
  #places{top:20px;right:20px;padding:8px;width:220px}
  #places button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text);
      font:inherit;font-size:14px;padding:9px 12px;border-radius:9px;cursor:pointer}
  #places button:hover{background:rgba(255,255,255,.08)}
  #places button.active{background:rgba(242,183,107,.18);color:var(--accent)}
  #places button span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
  #modes{bottom:24px;left:20px;padding:6px;display:flex;gap:4px}
  #modes button{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;padding:8px 14px;border-radius:9px;cursor:pointer}
  #modes button.active{background:rgba(255,255,255,.12);color:var(--text)}
  #orbit{bottom:24px;left:50%;transform:translateX(-50%);padding:6px}
  #orbit button{background:none;border:0;color:var(--text);font:inherit;font-size:13px;padding:8px 16px;border-radius:9px;cursor:pointer}
  #orbit button.on{color:var(--accent)}
  #loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;
      flex-direction:column;gap:12px;background:#0b0d12;transition:opacity .6s}
  #loading.hide{opacity:0;pointer-events:none}
  #loading .bar{width:220px;height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
  #loading .bar i{display:block;height:100%;width:40%;background:var(--accent);animation:slide 1.1s infinite ease-in-out}
  @keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
  #loading p{margin:0;font-size:13px;color:var(--muted)}
  #credits{bottom:24px;right:20px;padding:6px 10px;font-size:11px;color:var(--muted)}
  #credits a{color:var(--muted)}
  .maplibregl-popup-content{background:var(--panel);color:var(--text);font-family:var(--font);border-radius:10px;
      padding:10px 14px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
  .maplibregl-popup-content b{display:block;font-size:14px;margin-bottom:2px}
  .maplibregl-popup-content small{color:var(--muted)}
  .maplibregl-popup-content .poi{display:inline-block;margin:3px 4px 1px 0;padding:2px 7px;border-radius:999px;
      background:rgba(242,183,107,.14);color:var(--accent);font-size:12px}
  .maplibregl-popup-content .poi.heritage{background:rgba(201,162,74,.18);color:#e0c27a}
  /* Afgangstavle ved stoppesteder (bus/tog efter køreplan). */
  .maplibregl-popup-content table.departures{border-collapse:collapse;margin-top:6px;font-size:12px;width:100%}
  .maplibregl-popup-content table.departures td{padding:3px 6px 3px 0;vertical-align:middle}
  .maplibregl-popup-content table.departures td.in{color:var(--muted);white-space:nowrap;text-align:right}
  .maplibregl-popup-content .line{display:inline-block;min-width:26px;text-align:center;padding:1px 5px;border-radius:4px;
      color:#111;font-weight:600;font-size:11px}
  .maplibregl-popup-content tr.trip-link{cursor:pointer}
  .maplibregl-popup-content tr.trip-link:hover td{color:var(--accent)}
  /* Turpanel (bus/tog): hele ruten som tidslinje, nederst til venstre over dag/aften/nat-knapperne. */
  #trip{left:20px;bottom:80px;width:320px;max-height:55vh;display:none;flex-direction:column;padding:12px 14px;z-index:6}
  #trip.show{display:flex}
  #trip .head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
  #trip .close{margin-left:auto;background:none;border:0;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
  #trip .sub{font-size:12px;color:var(--muted);margin-top:4px}
  #trip .status{font-size:13px;margin-top:8px}
  #trip .actions{margin-top:8px}
  #trip .actions button{background:rgba(255,255,255,.08);border:1px solid var(--panel-border);color:var(--text);
      font:inherit;font-size:12px;padding:5px 10px;border-radius:8px;cursor:pointer}
  #trip .actions button.on{color:var(--accent);border-color:rgba(242,183,107,.5)}
  #trip ol{list-style:none;margin:10px 0 6px;padding:8px 0 0;overflow:auto;flex:1;min-height:60px;font-size:12px;
      border-top:1px solid var(--panel-border)}
  #trip li{display:flex;gap:10px;padding:3px 0 3px 16px;position:relative}
  #trip li::before{content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--muted)}
  #trip li::after{content:"";position:absolute;left:7px;top:16px;bottom:-9px;width:1px;background:var(--panel-border)}
  #trip li:last-child::after{display:none}
  #trip li .t{width:38px;flex:none;font-variant-numeric:tabular-nums;color:var(--muted)}
  #trip li.passed{opacity:.45}
  #trip li.local .n{font-weight:600}
  #trip li.next::before{background:var(--accent);box-shadow:0 0 0 3px rgba(242,183,107,.25)}
  #trip li.next .n,#trip li.next .t{color:var(--accent)}
  #trip .note{color:var(--muted);font-size:11px}
  #trip .line{display:inline-block;min-width:26px;text-align:center;padding:1px 6px;border-radius:4px;font-weight:600;font-size:12px}
  @media (max-width:700px){ #trip{left:10px;right:10px;width:auto;bottom:70px;max-height:45vh} }
  .maplibregl-popup-content .links a{color:var(--accent);text-decoration:none}
  .maplibregl-popup-content .links a:hover{text-decoration:underline}
  .maplibregl-popup-tip{border-top-color:var(--panel)!important}
  .maplibregl-ctrl-attrib{display:none}
  /* Vandstandsmåler: pille med målestok-ikon + aktuel værdi og en lille spids ned mod målepunktet. */
  .water-marker{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;cursor:pointer;
      background:var(--panel);border:1px solid rgba(110,180,230,.45);border-radius:999px;color:var(--text);
      font:600 13px/1 var(--font);white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.4);backdrop-filter:blur(8px);
      margin-bottom:8px}
  /* NB: ingen position:relative her – MapLibre giver markøren position:absolute, og det skal den beholde
     (ellers strækkes pillen over hele kortets bredde). absolute er også nok til at placere spidsen (::after). */
  .water-marker::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
      border:6px solid transparent;border-bottom:0;border-top-color:rgba(110,180,230,.6)}
  .water-marker svg{width:22px;height:22px;flex:none}
  .water-marker .unit{font-weight:400;color:var(--muted);margin-left:2px}
  .water-marker.high{border-color:rgba(255,140,90,.7)} .water-marker.high::after{border-top-color:rgba(255,140,90,.8)}
  .water-marker.low{border-color:rgba(160,160,170,.6)}
  /* Vejret står for sig selv, centreret øverst. */
  #weather{top:20px;left:50%;transform:translateX(-50%);padding:10px 18px;display:none;align-items:center;gap:12px}
  #weather.show{display:flex}
  #weather .now{display:flex;align-items:center;gap:12px}
  /* Prognose-strimmel for de kommende timer, adskilt fra "nu" med en tynd streg. */
  #weather .forecast{display:flex;gap:2px}
  #weather .now + .forecast{border-left:1px solid var(--panel-border);padding-left:12px;margin-left:2px}
  #weather .hour{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:36px;font-size:11px}
  #weather .hour .t{color:var(--muted)}
  #weather .hour .i{font-size:18px;line-height:1}
  #weather .hour .c{font-weight:600;font-size:13px}
  #weather .hour .p{color:#7cc0ee;font-size:10px;min-height:12px}
  #weather .icon{font-size:30px;line-height:1}
  #weather .temp{font-size:24px;font-weight:600;line-height:1}
  #weather .detail{font-size:11px;color:var(--muted);line-height:1.4}
  /* Mellemstore skærme: titel- og stedpanelet fylder toppen – vejret flyttes ned over bundknapperne. */
  @media (max-width:1000px){ #weather{top:auto;bottom:140px;max-width:calc(100vw - 40px)} }
  /* Smalle skærme: prognosen lægges under "nu" i stedet for ved siden af, så boksen ikke bliver for bred. */
  #weather .wx-close{align-self:flex-start;margin:-4px -8px 0 2px;background:none;border:0;color:var(--muted);font-size:18px;line-height:1;
      cursor:pointer;padding:2px 4px}
  #weather .wx-close:hover{color:var(--text)}
  /* Telefon: sammenfoldet er vejret kun en lille pille (ikon + grader) – tryk folder prognosen ud. */
  @media (max-width:700px){
    #weather:not(.open){padding:6px 12px;cursor:pointer}
    #weather:not(.open) .detail,#weather:not(.open) .wx-close,#weather:not(.open) .now + .forecast{display:none}
    #weather:not(.open) .forecast .hour:not(:first-child){display:none}
    #weather:not(.open) .icon{font-size:20px}
    #weather:not(.open) .temp{font-size:17px}
    #weather.open .wx-close{position:absolute;top:6px;right:10px;margin:0}
  }
  @media (max-width:600px){
    #weather{flex-direction:column;align-items:stretch}
    #weather .now + .forecast{border-left:0;padding-left:0;margin-left:0;border-top:1px solid var(--panel-border);padding-top:8px;justify-content:space-between}
  }
  #layers{bottom:70px;right:20px;padding:10px 14px;width:170px}
  #layers h2{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
  #layers label{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;cursor:pointer;color:var(--text)}
  #layers input{accent-color:var(--accent);cursor:pointer}
  @media (max-width:700px){
    #title{max-width:calc(100vw - 40px)}
    #title p{display:none}
    #places{top:auto;bottom:80px;right:20px;left:20px;width:auto;display:flex;overflow-x:auto;gap:4px}
    #places button{width:auto;white-space:nowrap}
    #places button span{display:none}
    #orbit,#layers{display:none}
    /* Kreditering skal kunne ses (OSM-krav) – kort udgave helt nede i hjørnet, under højde med Dag/Aften/Nat. */
    #credits{bottom:4px;right:8px;padding:2px 7px;font-size:10px;border-radius:8px}
    #credits .long{display:none}
    /* På telefonen zoomer og drejer man med fingrene – knapperne ville kun dække stedlisten. */
    .maplibregl-ctrl-bottom-right{display:none}
  }
/* Byvælger: én knap med aktuel by, der folder en liste ud grupperet efter kommune. */
#title .area-picker{margin-top:12px}
#areaBtn{display:flex;align-items:center;gap:6px;width:100%;background:rgba(255,255,255,.06);border:1px solid var(--panel-border);
    border-radius:10px;padding:8px 10px;color:var(--text);font:inherit;font-size:13px;cursor:pointer;text-align:left}
#areaBtn:hover{background:rgba(255,255,255,.1)}
#areaBtn .cur{font-weight:600}
#areaBtn .kom{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#areaBtn .chev{margin-left:auto;color:var(--muted);transition:transform .2s}
#areaBtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
#title .area-menu{margin-top:8px;max-height:min(60vh,460px);overflow:auto;display:grid;gap:10px;padding-right:2px}
#title .area-menu[hidden]{display:none}
#title .area-menu .grp{display:grid;gap:2px}
#title .area-menu .kommune{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);opacity:.7;margin:2px 0 2px 8px}
#title .area-menu a{display:block;text-decoration:none;color:var(--text);padding:6px 8px;border-radius:8px;border-left:2px solid transparent}
#title .area-menu a:hover{background:rgba(255,255,255,.07)}
#title .area-menu a b{display:block;font-size:13px;font-weight:600}
#title .area-menu a small{display:block;font-size:11px;color:var(--muted);margin-top:1px}
#title .area-menu a.active{background:rgba(242,183,107,.12);border-left-color:var(--accent)}
#title .area-menu a.active b{color:var(--accent)}
/* Nyhedsbånd: fuld bredde i bunden, teksten ruller fra højre mod venstre (pauser når musen er over). */
#ticker{position:absolute;left:0;right:0;bottom:0;height:32px;z-index:5;display:flex;align-items:center;
    background:var(--panel);backdrop-filter:blur(10px);border-top:1px solid var(--panel-border);font-size:13px;color:var(--text)}
#ticker[hidden]{display:none}
#ticker .label{flex:none;display:flex;align-items:center;gap:7px;height:100%;padding:0 14px;font-size:11px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border-right:1px solid var(--panel-border)}
#ticker .label::before{content:"";width:7px;height:7px;border-radius:50%;background:#e5484d;animation:tickpulse 1.6s infinite}
#ticker .viewport{flex:1;min-width:0;height:100%;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
#ticker .track{display:flex;width:max-content;height:100%;animation:tickscroll 60s linear infinite}
#ticker:hover .track{animation-play-state:paused}
#ticker .seg{display:flex;flex:none;align-items:center}
#ticker .tk{white-space:nowrap}
#ticker .tk[data-at],#ticker .tk[data-ti]{cursor:pointer}
#ticker .tk[data-at]:hover,#ticker .tk[data-ti]:hover{color:var(--accent)}
#ticker .tk i{font-style:normal;margin-right:6px}
#ticker .tk b{font-weight:600}
#ticker .tk .in{color:var(--muted)}
#ticker .sep{color:var(--muted);opacity:.5;padding:0 16px}
#ticker .line{display:inline-block;min-width:22px;text-align:center;padding:1px 5px;border-radius:4px;font-weight:600;font-size:11px}
@keyframes tickscroll{to{transform:translateX(-50%)}}
@keyframes tickpulse{50%{opacity:.25}}
/* Ønsker brugeren mindre bevægelse, står båndet stille og kan rulles med hånden i stedet. */
@media (prefers-reduced-motion:reduce){ #ticker .track{animation:none} #ticker .viewport{overflow-x:auto} }
/* Når båndet er tændt, skubbes alt der står i bunden op over det. */
body.ticker-on #modes,body.ticker-on #orbit,body.ticker-on #credits{bottom:56px}
body.ticker-on #layers{bottom:102px}
body.ticker-on #trip{bottom:112px}
body.ticker-on .maplibregl-ctrl-bottom-right{bottom:32px}
@media (max-width:1000px){ body.ticker-on #weather{bottom:172px} }
@media (max-width:700px){ body.ticker-on #places{bottom:112px} body.ticker-on #trip{bottom:102px}
  body.ticker-on #credits{bottom:36px} }
/* Kilder & tak: knap i kreditlinjen + dialog midt på skærmen. */
#credits button{background:none;border:0;padding:0;color:var(--accent);font:inherit;cursor:pointer}
#credits button:hover{text-decoration:underline}
dialog.info{max-width:560px;width:calc(100vw - 40px);max-height:calc(100vh - 60px);overflow:auto;padding:22px 24px 18px;
    background:#151821;color:var(--text);border:1px solid var(--panel-border);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.6);
    font-family:var(--font)}
dialog.info::backdrop{background:rgba(5,7,10,.55);backdrop-filter:blur(3px)}
dialog.info h2{margin:0 0 8px;font-size:20px}
dialog.info .lead{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--muted)}
dialog.info ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
dialog.info li{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--panel-border)}
dialog.info li > a{display:block;font-weight:600;font-size:14px;color:var(--text);text-decoration:none}
dialog.info li > a:hover{color:var(--accent)}
dialog.info li span{display:block;font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:3px}
dialog.info li span a{color:var(--muted)}
dialog.info .note{margin:14px 0 0;font-size:11.5px;line-height:1.45;color:var(--muted)}
dialog.info .close{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
dialog.info .close:hover{color:var(--text)}
/* Zoom/drej-knapperne (MapLibre) står i højre hjørne – lag-panel og kreditlinje holdes fri af dem. */
@media (min-width:701px){ #layers,#credits{right:56px} }
dialog.info .contact{margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:13.5px;line-height:1.5;
  background:rgba(242,183,107,.10);border:1px solid rgba(242,183,107,.35)}
dialog.info .contact a{color:var(--accent);font-weight:600}
/* Om kortet: historien, valgene og hvad der mangler. Åbnes fra titelboksen og kreditlinjen. */
dialog.info h3{margin:18px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:600}
dialog.info .story p{margin:0 0 10px;font-size:14px;line-height:1.55}
dialog.info .story ul{gap:6px}
dialog.info .story li{font-size:13px;line-height:1.5;color:var(--muted);padding:8px 12px}
dialog.info .story li b{color:var(--text);font-weight:600}
dialog.info .contact.big{margin-top:16px;font-size:14.5px}
#title .about-link{margin-top:10px;}
#title .about-link,dialog.info .about-link{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:12.5px;cursor:pointer}
#title .about-link:hover,dialog.info .about-link:hover{text-decoration:underline}
/* Mobilskuffe med Steder og Lag – findes kun på telefonen (bykort.js flytter panelerne herind). */
#drawerBtn,#drawer{display:none}
@media (max-width:700px){
  #drawerBtn{display:block;bottom:24px;right:12px;padding:10px 14px;color:var(--text);font:inherit;font-size:13px;cursor:pointer}
  #drawerBtn[aria-expanded="true"]{color:var(--accent)}
  #drawer{display:flex;flex-direction:column;left:0;right:0;bottom:0;max-height:65vh;border-radius:16px 16px 0 0;z-index:8;
      background:rgba(18,20,26,.94);transform:translateY(105%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
  #drawer.open{transform:none;visibility:visible;transition:transform .25s ease}
  #drawer .tabs{display:flex;gap:4px;padding:10px 10px 8px;border-bottom:1px solid var(--panel-border)}
  #drawer .tabs button{background:none;border:0;color:var(--muted);font:inherit;font-size:14px;padding:8px 14px;border-radius:9px;cursor:pointer}
  #drawer .tabs button.on{background:rgba(255,255,255,.12);color:var(--text)}
  #drawer .tabs .close{margin-left:auto;font-size:22px;line-height:1;padding:4px 10px}
  #drawer .body{overflow:auto;padding:8px 10px 16px}
  /* Panelerne mister deres egen boks og placering inde i skuffen. */
  #drawer #places,#drawer #layers{position:static;inset:auto;width:auto;max-width:none;padding:0;margin:0;background:none;
      border:0;border-radius:0;box-shadow:none;backdrop-filter:none;transform:none}
  #drawer #places{display:grid;grid-template-columns:1fr 1fr;gap:4px;overflow:visible}
  #drawer #places button{white-space:normal}
  #drawer #places button span{display:block}
  #drawer #layers{display:block}
  #drawer #layers h2{display:none}
  #drawer #layers label{padding:9px 2px;font-size:15px}
  #drawer[data-tab="places"] #layers,#drawer[data-tab="layers"] #places{display:none}
  /* Stedlisten ligger nu i skuffen – vejrpillen rykker ned på dens plads. */
  #weather{bottom:84px}
  body.ticker-on #weather{bottom:116px}
  body.ticker-on #drawerBtn{bottom:56px}
}