/* /kort - the full-screen map page.
   Linked from the page's own Head section, which _Layout renders AFTER ui.css, so the
   cascade here is exactly what an inline style block gave.

   Two Razor traps this file exists on the far side of: in a real .css file the escapes
   @@media and the Razor comment form must be written as plain @media and ordinary CSS
   comments. And CSS comments do NOT nest - a comment containing an example of a comment
   closes early and the parser eats the next rule, which on the original map silently
   turned the translucent panel opaque with no layout shift and no console error. */

html, body { padding: 0; margin: 0; }
body.kortside main { max-width: none; margin: 0; padding: 0; }
body.kortside footer.site { display: none; }

#kort { position: absolute; inset: 0; top: var(--hovedhoejde, 3.1rem); }

/* The panel sits ON the map, so it wants a translucent surface. This is the only token
   overridden locally, and deliberately: the rest come from tokens.css. */
#panel {
  position: absolute; z-index: 5; top: calc(var(--hovedhoejde, 3.1rem) + .6rem); left: .6rem;
  width: 17rem; max-height: calc(100vh - var(--hovedhoejde, 3.1rem) - 1.2rem);
  overflow: auto; padding: .7rem .8rem;
  background: color-mix(in srgb, var(--flade-hoej) 93%, transparent);
  border: 1px solid var(--kant); border-radius: var(--rund-stor); box-shadow: var(--skygge);
  font-size: .85rem;
}
#panel h2 { font-size: .95rem; margin: 0 0 .4rem }
#panel fieldset { border: 0; padding: 0; margin: 0 0 .7rem }
#panel legend { font-weight: 600; padding: 0; margin-bottom: .25rem; color: var(--dis) }
#panel label { display: block; padding: .12rem 0; cursor: pointer }
#panel select { width: 100%; padding: .3rem; border: 1px solid var(--kant);
                border-radius: var(--rund); background: var(--flade-hoej); color: var(--tekst) }
#panel .uvirksom { opacity: .45 }
#panel .uvirksom label { cursor: default }

#tael { font-weight: 600; margin: 0 0 .5rem; color: var(--tekst); min-height: 2.4em; }

/* min-height above is load-bearing, not cosmetic: the line goes from one to two lines as
   the figure arrives, and without the reservation every control below it jumps on each pan
   and zoom. */

.sig { list-style: none; margin: .1rem 0 .3rem; padding: 0 }
.sig li { display: flex; align-items: center; gap: .4rem; padding: .1rem 0; color: var(--dis) }
.sig i { width: .85rem; height: .85rem; border-radius: 50%; flex: 0 0 auto;
         border: 1px solid rgba(40,36,32,.45) }
.sigfod { margin: .3rem 0 0; color: var(--svag); font-size: .78rem; line-height: 1.35 }

/* ------------------------------------------------------------------- chrome
   Folded, the panel is one icon in the corner and the map is whole. Both directions are a
   single click and both buttons say what they do, which is the shape the grundviden map
   settled on. */
#panelfold {
  float: right; margin: -.1rem -.25rem 0 .5rem; padding: .2rem; border: 0;
  background: transparent; color: var(--svag); cursor: pointer; line-height: 0;
  border-radius: .4rem;
}
#panelfold:hover { color: var(--tekst); background: var(--flade) }

.kortknap {
  display: none; position: absolute; z-index: 5;
  top: calc(var(--hovedhoejde, 3.1rem) + .6rem); left: .6rem;
  width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center;
  background: var(--flade-hoej); border: 1px solid var(--kant); border-radius: var(--rund-stor);
  color: var(--tekst); cursor: pointer; padding: 0; box-shadow: var(--skygge);
}
body.kortfold #panel { display: none }
body.kortfold .kortknap { display: flex }

/* The active filter, on the map. Beside the corner button when the panel is folded, and clear
   of the panel when it is open - the filter is a fact about what you are looking at either
   way, so it must not be the panel's to hide. */
.kortchip {
  position: absolute; z-index: 5;
  top: calc(var(--hovedhoejde, 3.1rem) + .6rem); left: 18.4rem;
  display: flex; align-items: center; gap: .4rem; max-width: calc(100% - 22rem);
  background: var(--flade-hoej); border: 1px solid var(--kant); border-radius: var(--rund-stor);
  padding: .3rem .3rem .3rem .7rem; font-size: .85rem; font-weight: 600;
  color: var(--tekst); box-shadow: var(--skygge);
}
body.kortfold .kortchip { left: 3.8rem; max-width: calc(100% - 7.5rem) }
.kortchip[hidden] { display: none }
.kortchip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
#kortfilterryd {
  flex: none; border: 0; background: transparent; color: var(--svag); cursor: pointer;
  font-size: 1.15rem; line-height: 1; padding: .1rem .35rem; border-radius: .4rem;
}
#kortfilterryd:hover { color: var(--tekst); background: var(--flade) }

/* The corner stack. The stroke colour is hardcoded because MapLibre's own control group is
   white in both themes - this is its chrome, not ours. */
.maplibregl-ctrl-group button.cv-lok { display: flex; align-items: center; justify-content: center }
.cv-lok svg { display: block }
.cv-lok.finder svg { animation: cvspin 1.1s linear infinite }
@keyframes cvspin { 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) }

/* Find-me says something when it fails. A button that silently does nothing reads as broken,
   and a refused permission is the likeliest outcome of all. */
.korttoast {
  position: fixed; z-index: 100; left: 50%; transform: translateX(-50%);
  top: calc(var(--hovedhoejde, 3.1rem) + 1rem);
  width: min(24rem, calc(100vw - 2rem));
  background: var(--flade-hoej); border: 1px solid var(--kant); border-radius: var(--rund);
  box-shadow: var(--skygge); padding: .6rem .8rem; font-size: .85rem; color: var(--tekst);
}
.korttoast[hidden] { display: none }

/* MapLibre puts `font: 12px/20px ...` on .maplibregl-map, and a line-height written as a
   LENGTH inherits to every descendant whatever its own font-size - so this whole popup ran
   at 1,67 leading and a three-line company row was 70,6 px for 36 px of text. Measured
   04.08.2026 after Jonas reported "some irrelevant line spaces": 24 px of pure air per row.
   Set here rather than on the rows, because the heading and the sub-line inherited it too. */
.kortpop { line-height: 1.35 }
.kortpop h3 { margin: 0 0 .2rem; font-size: .95rem }
.kortpop p { margin: .2rem 0 }
/* 15rem until 04.08.2026, which showed two and a half of six entries and clipped the third
   through the middle of its amount - it read as a broken popup rather than a scrollable one.
   A row is three lines whenever it has both a share and a figure, and the group popup made
   that the common case rather than the exception. Capped against the VIEWPORT as well, so
   the same list on a phone cannot grow past the map it is anchored in.

   The 2 px of side padding is the dot's RING. `overflow: auto` clips at the padding box, and
   with no padding the first grid column starts exactly there - so the 1 px box-shadow ring on
   every dot was cut off down its left edge, which reads as a flat-sided circle rather than as
   a clipping bug (Jonas, 04.08.2026: "The dot is cut off on left side"). The right-hand 2 px
   does the same for the focus button's outline. */
.popliste { list-style: none; margin: .3rem 0 0; padding: 0 2px;
            max-height: min(22rem, 34vh); overflow: auto }
.popliste li { padding: .3rem 0; border-top: 1px solid var(--kant) }
.popliste a { font-weight: 600; text-decoration: none }
.popliste .meta, .popliste .vaerdi { display: block; font-size: .78rem; color: var(--dis) }
.popliste .vaerdi { color: var(--tekst) }
.maplibregl-popup-content { background: var(--flade-hoej); color: var(--tekst);
  border-radius: var(--rund-stor); box-shadow: var(--skygge); padding: .7rem .8rem }
.maplibregl-popup-tip { border-top-color: var(--flade-hoej); border-bottom-color: var(--flade-hoej) }

/* Phone: the panel becomes a top sheet, because a 17rem column down the side of a 390 px
   screen is most of the map. It starts FOLDED here (kort-panel.js decides, and remembers your
   choice after that), so the first thing a phone shows is the map. */
@media (max-width: 46rem) {
  /* Every control lives here now, so the panel is tall - it gets the screen down to the
     area bar, and scrolls inside that. */
  #panel { left: .4rem; right: .4rem; width: auto;
           max-height: calc(100vh - var(--hovedhoejde, 3.1rem) - 5.9rem) }
  /* Open, the panel is the whole top of the screen, so the chip underneath it would only ever
     peek out. Nothing is lost: the panel holds the filter controls themselves, set to what
     the chip would have said. The chip is for the FOLDED case, which is the phone default. */
  body:not(.kortfold) .kortchip { display: none }
  /* max-width, never `right`: the chip has to size to its text. Pinned to both edges it drew
     as a wide empty pill with "Top 10%" alone at the left end. */
  .kortchip { left: 3.8rem; max-width: calc(100% - 7.5rem) }
}

/* The 10 mio break in the value legend: the point where the colour scheme changes family,
   drawn as an actual rule so it is a stated boundary rather than a hue the reader has to
   spot for themselves. */
.sig li.bryd { border-top: 1px solid var(--kant); margin-top: .25rem; padding-top: .3rem }

/* A value class this zoom is not drawing. Dimmed, never removed: the reader is deciding
   where to zoom, and a scale that silently shortens gives them nothing to aim at. The
   swatch keeps its colour at reduced opacity so the ramp still reads as a ramp. */
.sig li.skjult { opacity: .4 }
.sig li.skjult i { box-shadow: none }
/* What this zoom leaves out, in words. Set apart from the axis explanation above it,
   because it is a fact about the VIEW rather than about the data. */
.sigzoom { border-top: 1px solid var(--kant); margin-top: .4rem; padding-top: .35rem;
           color: var(--dis) }

/* The popup heading is the address, and the address is the link into grundviden. It wears
   the LINK colour - the first version kept the heading's own ink with a dotted underline,
   and Jonas could not see it was a link at all (03.08.2026: "The link to the address on
   the popup need to be colored so you can see it's an address"). A link that has to be
   discovered by hovering has not been offered. */
.kortpop h3 a { color: var(--blaa); text-decoration: none }
.kortpop h3 a:hover { text-decoration: underline }

/* The map's dot, repeated beside each company in the list. Fixed size and its own column,
   so the names still line up when one row has no figure and draws the grey. */
.popliste li { display: grid; grid-template-columns: .65rem minmax(0, 1fr) auto; gap: 0 .45rem }
.popliste .popprik { width: .6rem; height: .6rem; border-radius: 50%; align-self: center;
                     margin-top: .15rem; box-shadow: 0 0 0 1px rgba(40,36,32,.55) }
.popliste a, .popliste .meta, .popliste .vaerdi { grid-column: 2 }

/* Focus this row's company or person as the map's group. Third column, spanning whatever
   rows the entry happens to have - a row with no figure is one line, a row with a share and
   a value is three, and the control has to sit still either way.
   32px is the tap target, not the glyph: this is used on a phone with a thumb, over a map
   where a miss pans instead of clicking. The button is deliberately quiet until hover -
   every row carries one, so at full strength thirty of them would out-shout the names they
   belong to, which are the reason the popup is open. */
.popliste .popfokus { grid-column: 3; grid-row: 1 / -1; align-self: center;
                      width: 2rem; height: 2rem; padding: 0; margin-left: .2rem;
                      display: flex; align-items: center; justify-content: center;
                      cursor: pointer;
                      color: var(--dis); background: none; border: 1px solid transparent;
                      border-radius: var(--rund) }
.popliste .popfokus svg { width: 1.05rem; height: 1.05rem }
.popliste .popfokus:hover { color: var(--blaa); background: var(--flade); border-color: var(--kant) }
.popliste .popfokus:focus-visible { outline: 2px solid var(--blaa); outline-offset: 1px }

/* The art toggle. Ported from grundviden's .gv-seg (Til salg / Til leje) on Jonas's own
   instruction - "make it a nice toggle like in grundviden map between for sale and for
   rent" - so the geometry, the pill radius and the active treatment are that control's,
   with cvrviden's tokens substituted for grundviden's. Two sites, one gesture. */
.seg { display: flex; border: 1px solid var(--kant); border-radius: 999px; padding: .15rem;
       gap: .15rem; background: var(--flade-hoej); margin: 0 0 .7rem }
/* `display:flex` is an AUTHOR rule and the `hidden` attribute is a UA rule, so author wins
   and .seg[hidden] stayed on screen while every probe reported hidden === true. Caught by
   looking at a screenshot, not by an assertion - the state was right and the pixels were
   not. Any display-setting rule on an element that can be hidden needs this partner. */
.seg[hidden] { display: none }
.seg button { flex: 1; font: inherit; font-size: .82rem; border: 0; background: transparent;
              color: var(--dis); padding: .34rem .8rem; border-radius: 999px; cursor: pointer;
              white-space: nowrap; touch-action: manipulation }
.seg button.aktiv { background: var(--blaa); color: var(--paa-blaa); font-weight: 600 }

/* A route with no companies in it. Still listed, because "0" is the answer to "does this
   person own anything", but not selectable - see tegnKontroller in kort.js. */
#panel label.tom { color: var(--svag); cursor: default }