/* /kort's own styling. Lifted out of Pages/Kort.cshtml on 01.08.2026: at 493 of the 500-line
   budget the page had no room for the sold-years control, and 219 of those lines were CSS that
   every /kort response re-sent inline. It loads from @section Head, which the layout renders
   AFTER gv.css - so the page still wins the cascade, exactly as an inline <style> did.
   Razor escapes are gone with the move: doubled at-signs are single here, and Razor comments are
   CSS comments. NB while you are in here: CSS comments do NOT nest. Writing an example of a
   comment inside a comment closes it early and the parser then eats the NEXT RULE - which is
   exactly what the first version of this header did on 01.08.2026. It swallowed the --card
   override below, the panel went opaque, and the only symptom was that every glyph in the panel
   switched from greyscale to subpixel antialiasing. tools/visual.sh caught it at 188 px. */

/* Only --card is overridden: panel and popups sit ON the map. padding:0 is
   load-bearing, not tidiness. Both explained in docs/KORT.md. */
:root { --card:#ffffffee; }
@media (prefers-color-scheme: dark) { :root { --card:#1c1c16ee; } }
html, body { margin:0; padding:0; height:100%; font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }
#kort { position:absolute; inset:0; }
/* 24rem, and the number is measured rather than chosen. At 16.5rem the panel gave 201 px of
   content, while the four market tabs need 293 px on one line at their normal size - so
   "Adresser" wrapped onto a second row - and the Bolig dropdown declares min-width:19rem =
   285 px, i.e. 84 px wider than the box it lives in, which is why its right-hand column was
   cut off (Jonas, 31.07.2026). 24rem = 360 px leaves 313 px, which clears both with room.
   If a criterion panel ever declares more than that, widen this or narrow that - do not let
   it overflow, because the panel scrolls vertically and hides the overflow sideways.

   `scrollbar-gutter:stable` is load-bearing, not polish. 22rem was the first attempt and it
   measured as fitting - with 5 px to spare - right up until you OPENED a dropdown: the panel
   grew past its max-height, a 15 px scrollbar appeared, the content box lost those 15 px and
   the tabs wrapped again. So the fault only showed in the state the user is actually in, and
   the measurement taken in the other state said it was fine. Reserving the gutter makes the
   content width the same whether it scrolls or not. */
.panel { position:absolute; top:.8rem; left:.8rem; z-index:5; background:var(--card); backdrop-filter:blur(6px);
    border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem;
    width:min(24rem, calc(100vw - 1.6rem));
    max-height:calc(100% - 2rem); overflow:auto; scrollbar-gutter:stable; }
#panelfold { float:right; margin:.05rem 0 0 .5rem; padding:.2rem; border:0; background:transparent;
    color:var(--muted); cursor:pointer; line-height:0; border-radius:8px; }
#panelfold:hover { color:var(--fg); }
.panelknap { display:none; position:absolute; top:.8rem; left:.8rem; z-index:5; width:2.6rem; height:2.6rem;
    align-items:center; justify-content:center; background:var(--card); backdrop-filter:blur(6px);
    border:1px solid var(--line); border-radius:14px; color:var(--fg); cursor:pointer; padding:0;
    box-shadow:0 2px 10px rgba(0,0,0,.15); }
body.kortfold .panel { display:none; }
body.kortfold .panelknap { display:flex; }
/* The active area, on the map itself. Sits beside the panel button when the panel is folded, and
   stays put when it is open - the area is a fact about the search either way. Same card treatment
   as the other floating controls so it reads as chrome, not as a popup. */
.kortomr { position:absolute; top:.8rem; left:3.8rem; z-index:5; display:flex; align-items:center;
    gap:.4rem; max-width:calc(100% - 8rem); background:var(--card); backdrop-filter:blur(6px);
    border:1px solid var(--line); border-radius:14px; padding:.35rem .3rem .35rem .7rem;
    font-size:.85rem; font-weight:600; color:var(--fg); box-shadow:0 2px 10px rgba(0,0,0,.15); }
.kortomr[hidden] { display:none; }
.kortomr > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kortomrtal { font-weight:400; color:var(--muted); flex:none; }
#kortomrfjern { flex:none; border:0; background:transparent; color:var(--muted); cursor:pointer;
    font-size:1.15rem; line-height:1; padding:.1rem .35rem; border-radius:9px; }
#kortomrfjern:hover { color:var(--fg); background:rgba(0,0,0,.06); }
/* With the panel open there is no room beside it on a phone, and the panel carries its own chip
   there anyway. Desktop keeps it: the panel is a left column, so the map's top-left is free. */
@media (max-width:840px) { body:not(.kortfold) .kortomr { display:none; } }
/* The layer sheet. A SHEET behind its own button rather than another column in the panel:
   the panel is the SEARCH, this is the MAP (docs/KORT-PLAN.md §4e). Same card treatment,
   anchored just left of the top-right control stack it hangs from. */
#lagark { position:absolute; top:.8rem; right:3.6rem; z-index:6; background:var(--card);
    backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:14px;
    padding:.75rem .9rem; width:15.5rem; max-height:calc(100% - 2rem); overflow:auto;
    box-shadow:0 8px 24px rgba(0,0,0,.2); }
#lagark h2 { font-size:.95rem; margin:0 0 .35rem; letter-spacing:-.01em; }
#lagark-luk { float:right; margin:.05rem -.2rem 0 .5rem; padding:.2rem; border:0;
    background:transparent; color:var(--muted); cursor:pointer; line-height:0; border-radius:8px; }
#lagark-luk:hover { color:var(--fg); }
.bgvalg { display:grid; gap:.1rem; font-size:.83rem; margin:0 0 .1rem; }
.bgvalg label { margin:0; color:inherit; font-size:.83rem; }
/* iOS auto-zooms the page whenever you focus a form control whose text is under 16px, and it
   does not zoom back out - on a full-screen map that leaves you panned somewhere you did not
   ask to be. gv.css already carries this rule for .gv-tal/.gv-select/.gv-tekst, but this page
   uses none of them: it is the one control here that is not a checkbox, and it had the size
   written inline, where no stylesheet can reach it. Keep the small size on a pointer device,
   where the zoom does not happen and the panel is dense on purpose. */
.lagvalg { font-size:.74rem; }
@media (max-width:720px) { .lagvalg { font-size:16px; } }
#lagsaet button { font:inherit; font-size:.74rem; padding:.15rem .5rem; border:1px solid var(--line);
    border-radius:999px; background:transparent; color:var(--fg); cursor:pointer; }
#lagsaet button:hover, #lagsaet button.aktiv { border-color:var(--accent); color:var(--accent); }
#lagsaet button.aktiv { font-weight:600; }
/* A colour the current base set cannot paint. Dimmed and unclickable rather than removed:
   a control that vanishes teaches nothing, and #farve-note says why in one line. */
#farvevalg label.slukket { opacity:.42; }
#farvevalg label.slukket input { pointer-events:none; }
@media (max-width:640px) { #lagark { top:3.6rem; right:.8rem; left:.8rem; width:auto; } }
/* specificity must beat maplibre-gl.css' ".maplibregl-ctrl-group button{display:block}" */
.maplibregl-ctrl-group button.gv-lok, .maplibregl-ctrl-group button.gv-lag { display:flex; align-items:center; justify-content:center; }
.gv-lok svg, .gv-lag svg { display:block; }
.gv-lag.aaben { background:rgba(127,179,86,.28); }
.gv-lok.finder svg { animation:gvspin 1.1s linear infinite; }
@keyframes gvspin { to { transform:rotate(360deg); } }
.migprik { width:14px; height:14px; border-radius:50%; background:#1a73e8; border:2px solid #fff;
    box-shadow:0 0 0 6px rgba(26,115,232,.28); }
.lokfejl { position:fixed; top:4.2rem; left:50%; transform:translateX(-50%); z-index:30;
    width:min(22rem, calc(100vw - 1.6rem)); background:var(--card); backdrop-filter:blur(6px);
    border:1px solid var(--line); border-radius:14px; padding:.8rem .95rem; font-size:.85rem;
    box-shadow:0 8px 24px rgba(0,0,0,.25); }
.lokfejl b { font-size:.9rem; }
.lokfejl ol { margin:.4rem 0 .1rem; padding-left:1.15rem; }
.lokfejl li { margin:.2rem 0; }
.lokfejl p { margin:.4rem 0 .1rem; }
.lokfejl .knapper { display:flex; gap:.5rem; justify-content:flex-end; margin-top:.6rem; }
.lokfejl button { font:inherit; font-size:.8rem; padding:.3rem .7rem; border:1px solid var(--line);
    border-radius:8px; background:transparent; color:var(--fg); cursor:pointer; }
.lokfejl button.primaer { border-color:var(--accent); color:var(--accent); font-weight:600; }
@media (max-width: 640px) {
    .panel { width:auto; max-width:calc(100% - 1.6rem); }
}
.panel h1 { font-size:1rem; margin:0 0 .1rem; letter-spacing:-.01em; }
/* The area nav, INSIDE the panel - the same partial the other 55 pages and the phone bar use.
   What stood here was a bespoke line reading "Limkærvej 3 · Konto": a bare address with
   nothing to say what it was, and no way to search at all, since the only link to `/` was the
   word "Grundviden" in the heading, which reads as a logo. Jonas, 31.07.2026: "The address
   says nothing, so hard to understand why it's there. And link to search is not obvious."
   The shared component answers both - the address sits in a labelled row of four behind a
   house icon, and Søg carries your search back with it (the gv_soeg cookie in omrnav.js).

   TWO renders of one partial, not a move: the bottom bar is position:fixed and `.panel` has
   backdrop-filter (which makes it the containing block for fixed descendants) plus
   overflow:auto (which would clip it), so the bar has to stay outside. Each copy is hidden on
   the other's breakpoint, so exactly one is ever on screen. */
@media (max-width:840px) { .omrpanel { display:none; } }
@media (min-width:841px) {
    .omrpanel .omrnav.omr-kortside { display:flex; justify-content:flex-start;
        /* gap is shorthand and resets row-gap, so row-gap MUST come after it */
        flex-wrap:wrap; gap:.9rem; row-gap:.35rem; margin:.15rem 0 .45rem; }
    /* narrower than the 11rem the wide pages allow: four items share 298 px here, and the
       address is the only one that can be long. Ellipsis does the rest. */
    .omrpanel .omr-tekst { max-width:8rem; }
    /* THE WORDMARK GETS ITS OWN LINE HERE, AND THE ROW BELOW MAY WRAP (09.08.2026, Jonas
       reported it; the two-line shape is his call). The wordmark landed on 07.08.2026 as a
       fifth child of a row this file had budgeted for four, and the panel is the one place
       .omrnav is not full width: measured on prod at 1440 px the row had 313 px and wanted 436,
       so `Konto` rendered at x=407-463 against a panel whose right edge is 372. Not
       clipped-looking - GONE, and with it the only way to reach the account from the desktop
       map. The address ran past the edge too.

       `flex-wrap:wrap` is the half that keeps this fixed. Hiding or shrinking something buys a
       fixed number of pixels and the next long value spends them again: with the wordmark gone
       entirely there was 3 px of slack, and a remembered address at the 8rem cap still pushed
       Konto 63 px past the edge. Wrapping has no budget to overrun - the worst case is a third
       line, which is visible, rather than an item positioned outside its container, which is
       not. That is the actual defect class here: overflow on a `.panel` that does not scroll
       sideways does not look wrong, it looks absent.

       Specificity, not load order: _OmradeNav.cshtml sets `.omrnav a.omr-maerke` (0,2,1) in an
       inline <style> that comes AFTER this file in document order, so an equal-specificity rule
       here would lose. `.omrpanel .omrnav a.omr-maerke` is (0,3,1) and wins wherever it sits. */
    .omrpanel .omrnav a.omr-maerke { flex:0 0 100%; margin:0 0 .1rem; }
}
.panel .sub { font-size:.75rem; color:var(--muted); margin:0 0 .7rem; }
.panel a { color:var(--accent); }
label { display:block; font-size:.78rem; color:var(--muted); margin:.5rem 0 .15rem; }
input[type=range] { width:100%; }
.val { font-variant-numeric:tabular-nums; font-weight:600; font-size:.85rem; }
.legend { display:grid; gap:.15rem; margin-top:.7rem; font-size:.75rem; color:var(--muted); }
.legend span::before { content:''; display:inline-block; width:.7rem; height:.7rem; border-radius:50%; margin-right:.4rem; vertical-align:-1px; }
.c0::before { background:#b8524a; } .c1::before { background:#a3a394; }
.c2::before { background:#d9c545; } .c3::before { background:#7fb356; } .c4::before { background:#2f7d22; }
.c5::before { background:#5b7b8c; }
#leg-jord span::before { background:var(--f); border-radius:2px; }
#leg-skole-raekker span::before { background:var(--f); }
#leg-radon span::before { background:var(--f); border-radius:2px; }
#leg-kote span::before { background:var(--f); border-radius:2px; }
#leg-drikkevand span::before, #leg-zone span::before, #leg-skybrud span::before, #leg-natur span::before { background:var(--f); border-radius:2px; }
#leg-trafik span::before { background:var(--f); }
#leg-stoej span::before { background:var(--f); border-radius:2px; }
#leg-strand span::before, #leg-fredning span::before, #leg-byggelinje span::before { background:var(--f); border-radius:2px; }
#leg-vandloeb span::before { background:var(--f); }
#leg-vindmoelle span::before { background:var(--f); }
#leg-virk span::before { background:var(--f); }
/* The selected company group's banner (V4): fixed top-centre, above the panel furniture, below the
   lokfejl toast. Solid dark because it is the active-selection state, not a passive legend. */
#virkgruppe-chip { position:fixed; top:.8rem; left:50%; transform:translateX(-50%); z-index:20;
  display:flex; align-items:center; gap:.55rem; max-width:calc(100vw - 1.6rem);
  background:rgba(28,39,51,.94); color:#fff; padding:.38rem .38rem .38rem .8rem; border-radius:999px;
  font-size:.82rem; box-shadow:0 2px 12px rgba(0,0,0,.28); }
#vg-tekst { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#vg-side { color:#bfe0ff; white-space:nowrap; text-decoration:none; }
#vg-side:hover { text-decoration:underline; }
#vg-ryd { flex:none; background:rgba(255,255,255,.16); color:#fff; border:0; border-radius:999px;
  padding:.2rem .6rem; cursor:pointer; white-space:nowrap; font-size:.8rem; }
#vg-ryd:hover { background:rgba(255,255,255,.3); }
#leg-poi span::before, #leg-almen span::before { content:none; } #leg-almen span { margin-right:.5rem; }
/* Ten categories in TWO columns - the other legends have two to six entries and can afford one
   line each. NB: do NOT reach for `display:flex` here. kort-lagvalg.js reveals a legend by setting
   `style.display = "grid"` on the element, so an inline style wins and a display rule in this file
   is one that can never apply; grid-template-columns is a property that inline style never sets. */
#leg-poi { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.12rem .5rem; }
.poilg { display:inline-flex; align-items:center; gap:.22rem; }
#leg-kriminalitet span::before { background:var(--f); border-radius:2px; }
#leg-udsatte span::before { background:var(--f); border-radius:2px; }
#leg-fjernvarme span::before, #leg-nybyggeri span::before { background:var(--f); border-radius:2px; }
#leg-arter span::before { background:var(--f); }
#leg-solpotentiale span::before { background:var(--f); border-radius:2px; }
#leg-olietank span::before, #leg-energianlaeg span::before { background:var(--f); }
#leg-tilsalg span::before { background:var(--f); border-radius:50%; }
#leg-vaerdi span::before { background:var(--f); }
/* The search legend's klima case: fixed bands as swatches (kort-skala.js gvKlimaLegende).
   Scoped, because the ordinary search legend is a gradient strip whose spans must NOT grow dots. */
#soegklima span::before { background:var(--f); border-radius:50%; }
.legnote { color:var(--muted); font-style:italic; grid-column:1/-1; margin-top:.15rem; }
/* min-height reserves both lines, so the filter groups below do not jump 18px when
   the count arrives - on every pan and zoom. Why 3em, and what it fixed in the
   visual gate: docs/KORT.md. */
.count { margin-top:.6rem; font-size:.8rem; color:var(--muted); min-height:3em; }
/* An element the SEARCH has borrowed: it belongs to the Udforsk mode, and while a search is
   on that mode is not what is drawn, so its count and its legend would be describing layers
   nobody can see. !important is not laziness here - kort.js writes `style.display` on both
   of these directly, and an inline style beats a class and beats [hidden]. One element, one
   owner, and no writer left to race. Set and cleared in kort-soeg.js (laan()). */
.count-laant { display:none !important; }
/* The shared filter bar was drawn for a full-width page; here it lives in a 22rem panel.
   Only the WIDTH assumptions are overridden, never the look: the criterion buttons ran past
   the edge. Wrapping is the right answer rather than a horizontal scroller - a scroller hides
   that there is a fourth market at all, which is the same fault as a filter you cannot see.
   The market tabs kept a smaller font and tighter padding on top of that, and no longer need
   to: at 22rem they fit on one line at the SAME size as everywhere else, which is what Jonas
   asked for ("looks horrible ... so they can look nice next to each other like on mobile").
   flex-wrap stays as the fallback - if a market is ever added, it wraps instead of clipping. */
.panel .gv-seg { flex-wrap:wrap; }
.panel .topraekke, .panel .gv-fbar { flex-wrap:wrap; gap:.35rem; }
.panel .gv-fknap > summary, .panel .gv-fknap { max-width:100%; }
/* The bar's own panels are absolutely positioned against the page on the list. Inside a
   scrolling map panel they have to stay in the flow, or they hang over the layer groups. */
.panel .gv-panel { position:static; width:auto; box-shadow:none; }
/* Nulstil is a text link on the list, where it sits at the end of a wide bar and reads as
   one. In a 16.5rem panel the bar wraps and it lands alone on its own line, where an
   underlined word looks like a leftover rather than the way out of a search - and "no way to
   reset the filters completely on the map" is exactly what Jonas reported (30.07.2026). Same
   control, same behaviour, just given an edge so it reads as something you can press. */
.panel #nulstil { border:1px solid var(--line); border-radius:999px; padding:.15rem .6rem;
    text-decoration:none; font-size:.78rem; }
.panel h1 a { color:inherit; text-decoration:none; }
.soegres { position:absolute; left:0; right:0; top:100%; z-index:9; background:var(--card);
    border:1px solid var(--line); border-radius:10px; overflow:hidden auto; max-height:45vh;
    box-shadow:0 8px 24px rgba(0,0,0,.2); display:none; }
.soegrad { display:block; padding:.45rem .6rem; text-decoration:none; color:var(--fg);
    border-bottom:1px solid var(--line); font-size:.82rem; }
.soegrad:last-child { border-bottom:0; }
.soegrad:hover, .soegrad.sel { background:rgba(127,179,86,.2); }
.soegtag { display:inline-block; font-size:.6rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.03em; color:var(--accent); border:1px solid var(--line); border-radius:5px;
    padding:.02rem .3rem; margin-right:.35rem; vertical-align:.06em; }
.soegnb { color:var(--muted); font-size:.72rem; }
details.grp { margin:.1rem 0; }
details.grp summary { font-size:.71rem; font-weight:700; color:var(--muted); text-transform:uppercase;
    letter-spacing:.04em; cursor:pointer; padding:.25rem 0; user-select:none; }
details.grp summary:hover { color:var(--fg); }
details.grp > div { padding:.05rem 0 .3rem; }
.lagant { color:var(--accent); letter-spacing:0; }
.maplibregl-popup-content { font:13px/1.45 system-ui,sans-serif; border-radius:10px;
    background:#fff; color:#1a1a17; box-shadow:0 2px 12px rgba(0,0,0,.25); padding:9px 11px 10px; }
.maplibregl-popup-content strong { color:#1a1a17; }
.maplibregl-popup-content em { color:#555; }
/* The tip is a CSS triangle: four borders, three transparent and one coloured - and MapLibre
   zeroes the WIDTH of the border OPPOSITE the coloured one, per anchor class. So colouring
   top and bottom for every anchor was invisible on the top/bottom anchors (the opposite
   border is 0 px wide) and wrong on the side ones, where top and bottom are still 10 px and
   got painted white: the triangle filled in and read as a small box. Jonas hit it on mobile
   01.08.2026, where a side anchor is the common case because the popup is nearly as wide as
   the screen. Colour only the border its own anchor actually uses. */
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color:#fff !important; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color:#fff !important; }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color:#fff !important; }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color:#fff !important; }
.maplibregl-popup-content a { color:#2f5d22; font-weight:600; }
/* for-sale popup: photo sizes in CSS (fixed height = the popup does not grow after
   the anchor calculation when the image loads - that was what cut it off over the edge) */
.pfoto { display:block; width:100%; height:96px; object-fit:cover; border-radius:8px; margin-bottom:5px; background:#eee; }
.pthumb { float:left; width:40px; height:40px; object-fit:cover; border-radius:6px; margin:2px 7px 2px 0; background:#eee; }
.ppris { font-size:15px; }
@media (max-width:480px) {
    .maplibregl-popup { max-width:min(272px, calc(100vw - 16px)) !important; }
    .maplibregl-popup-content { font-size:12px; padding:8px 9px 9px; max-height:60vh; overflow-y:auto; overscroll-behavior:contain; }
    .pfoto { height:78px; }
    .ppris { font-size:14px; }
}

/* The map's own search box. Moved off an inline style 01.08.2026 for the reason the inline size
   was there to begin with - it said .9rem, which is 14,4 px, and iOS Safari ZOOMS THE WHOLE PAGE
   when you focus an input under 16 px. The search page's inputs were fixed on 28.07.2026 and this
   one was missed, so the map was the last surface where tapping the search bar threw the layout
   sideways on a phone. 16 px only below 720 px: the zoom rule is a phone rule, and forcing it on
   desktop would make this box larger than every control under it. */
#kortsoeg { width:100%; padding:.45rem .6rem; font:inherit; font-size:.9rem;
    border:1px solid var(--line); border-radius:8px; background:transparent; color:inherit;
    margin:.3rem 0 .2rem; }
@media (max-width:720px) { #kortsoeg { font-size:16px; } }