/* ============================================================
   Bygg & Håndverk Design: omrader.css (09.11.2026), the area map «Her jobber vi». The engine is Bygglund's (06.11.2026), which is the
   Janis map (Sverre 06.11.2026: «Janis-kartet er fasit for områdekart»): Kartverket's map, cleaned of names and roads, stands as a plan
   on a framed sheet with a coordinate band, a faint grid, a north arrow and a true scale bar, Damhauggata 32 as a survey mark and the
   five places with hairline leaders. With the scroll the plan draws itself (js/omrader.js: one canvas for the map and the lines, the
   names as their own layer) and the numbered list beside it lights up place by place.
   Without JS or with reduced motion the sheet is a still with all five places (production/kilde/kart/lag_kart.py writes it).
   Everything here starts with omr; colours, sizes and timings are the --kart-* tokens, the page's own tokens otherwise. The label,
   the title, the lead and the buttons are the page's own classes (.merke, .tittel-2, .ingress, .knapp): only placed here, never restyled.
   ============================================================ */

.omrade,
.omrade *,
.omrade *::before,
.omrade *::after {
  box-sizing: border-box;
}

.omrade {
  --omr-reise: var(--kart-reise);
  position: relative;
  background: var(--natt);
  color: var(--tekst-lys);
}

@media (max-width: 63.99rem) {
  .omrade {
    --omr-reise: var(--kart-reise-smal);
  }
}

/* ---- the head: label and title, in the page's flow above the map ---- */
.omr-hode {
  position: relative;
  z-index: 1;
  max-width: var(--bredde);
  margin: 0 auto;
  padding: var(--rom) var(--kant) 0;
}

.omr-hode > * {
  max-width: 52rem;
}

/* ---- the still sheet: the lead, the list and the buttons, and the framed map ---- */
.omr-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(1.5rem, 3.5vw, 2.25rem);
  max-width: var(--bredde);
  margin: 0 auto;
  padding: clamp(1.25rem, 2.6vw, 2rem) var(--kant) var(--rom);
}

.omr-reise {
  display: none;
}

.omr-tekst {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.6vw, 2rem);
  min-width: 0;
}

.omr-scene .omr-ingress {
  margin: 0;
}

/* the list: the five places as a ruled, numbered legend */
.omr-soner {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--kart-linje-sterk);
}

.omr-sone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.9rem;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--kart-linje);
}

.omr-sone-nr {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--kart-linje-sterk);
  border-radius: 50%;
  color: var(--tekst-lys);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.omr-sone-navn {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.omr-knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.omr-knapper .knapp {
  flex: 1 1 auto;
}

/* the sheet: a true frame with a margin inside, the map in a neatline, the caption under it */
.omr-ark {
  margin: 0;
  min-width: 0;
  padding: var(--kart-innmarg);
  border: 1px solid var(--kart-linje-sterk);
  border-radius: var(--radius);
  background: var(--kart-ark);
}

/* the still sheet is never taller than the screen (a phone on its side): it narrows instead (--omr-bredde is the map's width over its
   height, from lag_kart.py), and stands in the middle */
.omr-ark {
  justify-self: center;
  width: 100%;
  max-width: calc((100svh - var(--meny-h) - 6.5rem) * var(--omr-bredde, 1.5) + var(--kart-band) + var(--kart-band-smal) + 2 * var(--kart-innmarg) + 2px);
}

.omr-vindu {
  position: relative;
  padding: var(--kart-band) var(--kart-band-smal) var(--kart-band-smal) var(--kart-band);
}

.omr-kartflate {
  position: relative;
  overflow: hidden;
  background: var(--kart-dyp);
  aspect-ratio: var(--omr-forhold, 3 / 2);
  box-shadow: 0 0 0 1px var(--kart-linje-sterk);
}

.omr-kart {
  display: none;
}

/* the still map: the overview, cropped to the five places by the position lag_kart.py writes on it */
.omr-kart-oversikt {
  display: block;
  position: absolute;
  max-width: none;
}

/* without the script there are no coordinates to write in the band: it closes to a thin margin */
.omrade:not(.omr-tegnet) .omr-vindu {
  padding: var(--kart-band-smal);
}

.omrade:not(.omr-tegnet) .omr-stille,
.omrade:not(.omr-tegnet) .omr-navn {
  inset: var(--kart-band-smal);
}

.omr-lerret {
  display: none;
}

.omr-stille,
.omr-navn {
  position: absolute;
  inset: var(--kart-band) var(--kart-band-smal) var(--kart-band-smal) var(--kart-band);
  pointer-events: none;
}

.omr-navn {
  overflow: hidden;
}

.omr-plan-stille {
  display: block;
  width: 100%;
  height: 100%;
}

.omr-plan-stille path,
.omr-plan-stille circle {
  fill: none;
  stroke: var(--kart-blekk);
  vector-effect: non-scaling-stroke;
}

.omr-s-linje {
  stroke-width: 1.1px;
  stroke-opacity: 0.8;
}

/* «områdene rundt»: a dashed arc round Halden through each place further out */
.omr-s-ring {
  stroke-width: 1.2px;
  stroke-opacity: 0.8;
  stroke-dasharray: 3 4;
}

.omr-s-prikk {
  stroke-linecap: round;
  stroke-width: 5px;
}

.omr-plan-stille .omr-s-p0 {
  stroke-width: 4px;
}

.omr-s-hjem {
  stroke-width: 1.15px;
}

/* the caption line under the map */
.omr-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--kart-strip-h);
  padding: 0.5rem 0.1rem 0;
  color: var(--kart-blekk-demp);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.omr-kilde {
  color: inherit;
  text-decoration: none;
}

.omr-kilde:hover,
.omr-kilde:focus-visible {
  color: var(--kart-blekk);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.omr-strip-hoyre {
  color: var(--kart-blekk);
  font-variant-numeric: tabular-nums;
}

/* ---- the names: small capitals with a hairline leader from the dot, and a halo ---- */
.omr-sted {
  --omr-tx: 19px;
  --omr-ty: -50%;
  --omr-sh-l: -14px;
  --omr-dg-l: -22.5px;
  --omr-dg-o: right center;
  --omr-dg-r: 0deg;
  --omr-dg-w: 0px;
  position: absolute;
  left: var(--omr-x);
  top: var(--omr-y);
  color: var(--kart-blekk);
  font-size: var(--kart-navn-str);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 2px var(--kart-halo), 0 0 7px var(--kart-halo), 0 0 12px var(--kart-halo);
  translate: var(--omr-tx) var(--omr-ty);
}

/* the level part of the leader, and the diagonal that runs to the dot */
.omr-sted::before,
.omr-sted::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: 0.72;
}

.omr-sted::before {
  left: var(--omr-sh-l);
  width: 10px;
}

.omr-sted::after {
  left: var(--omr-dg-l);
  width: var(--omr-dg-w);
  transform-origin: var(--omr-dg-o);
  transform: rotate(var(--omr-dg-r));
}

.omr-l,
.omr-lu,
.omr-ld {
  --omr-sh-l: calc(100% + 4px);
  --omr-dg-l: calc(100% + 14px);
  --omr-dg-o: left center;
}

.omr-l {
  --omr-tx: calc(-100% - 19px);
}

.omr-ru,
.omr-rd,
.omr-lu,
.omr-ld {
  --omr-dg-w: 8.5px;
}

.omr-ru {
  --omr-tx: 22px;
  --omr-ty: calc(-8px - 50%);
  --omr-dg-r: -45deg;
}

.omr-rd {
  --omr-tx: 22px;
  --omr-ty: calc(8px - 50%);
  --omr-dg-r: 45deg;
}

.omr-lu {
  --omr-tx: calc(-100% - 22px);
  --omr-ty: calc(-8px - 50%);
  --omr-dg-r: 45deg;
}

.omr-ld {
  --omr-tx: calc(-100% - 22px);
  --omr-ty: calc(8px - 50%);
  --omr-dg-r: -45deg;
}

/* a longer leader, where a near neighbour crowds the name: 20 px down, then level */
.omr-rd2 {
  --omr-tx: 34px;
  --omr-ty: calc(20px - 50%);
  --omr-dg-r: 45deg;
  --omr-dg-w: 25.5px;
  --omr-dg-l: -39.5px;
}

/* Halden: the survey mark is wider, so its leader starts further out and the name is larger. Its name stands on the left, because
   Tistedal is close on the right */
.omr-sted-hjem {
  --omr-tx: 33px;
  font-size: var(--kart-hjem-str);
  letter-spacing: 0.16em;
}

.omr-sted-hjem.omr-l {
  --omr-tx: calc(-100% - 33px);
}

/* phones: the labels' directions for a narrow sheet (data-omr-ret-m) */
@media (max-width: 47.99rem) {
  .omr-sted-hjem {
    font-size: var(--kart-navn-str);
    font-weight: 700;
  }

  .omr-sted-hjem.omr-l {
    --omr-tx: calc(-100% - 29px);
  }

  .omr-m-rd2 {
    --omr-sh-l: -14px;
    --omr-dg-o: right center;
    --omr-tx: 34px;
    --omr-ty: calc(20px - 50%);
    --omr-dg-r: 45deg;
    --omr-dg-w: 25.5px;
    --omr-dg-l: -39.5px;
  }
}

/* ---- narrow screens, still: the lead, the map, the list, the buttons ---- */
@media (max-width: 63.99rem) {
  .omr-tekst {
    display: contents;
  }

  .omr-ingress {
    order: 1;
  }

  .omr-ark {
    order: 2;
  }

  .omr-soner {
    order: 3;
  }

  .omr-knapper {
    order: 4;
  }
}

/* the list in two columns on a phone, all five in a row from 42rem */
@media (max-width: 63.99rem) {
  .omr-soner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }
}

@media (min-width: 42rem) and (max-width: 63.99rem) {
  .omr-soner {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---- wide screens, still: the text on the left, the sheet on the right ---- */
@media (min-width: 64rem) {
  .omr-scene {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    column-gap: clamp(1.75rem, 3.6vw, 4rem);
    align-items: start;
  }
}

/* ---- with JS: the canvas draws the plan (finished at once, or with the scroll when pinned) ---- */
.omr-tegnet .omr-lerret {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.omr-tegnet .omr-kart-oversikt,
.omr-tegnet .omr-stille {
  display: none;
}

.omr-tegnet .omr-kartflate {
  background: transparent;
  box-shadow: none;
}

/* the script places the names on their dots; until its first frame they wait unseen */
.omr-tegnet .omr-sted {
  left: 0;
  top: 0;
  opacity: 0;
  will-change: transform, opacity;
}

/* ============================================================
   Moving: under html.js-anim, once omrader.js has taken the section (omr-styrt), and only on screens tall enough to pin.
   --omr-pin tells omrader.js the pinned layout is on.
   ============================================================ */

/* both pinned layouts: the scene stands for --omr-reise screens; the head overlaps the scene's top padding by the height of the menu,
   so the gap between the title and the scene is the same before the pin as everywhere else */
@media (min-height: 34rem) and (max-width: 63.99rem), (min-height: 30rem) and (min-width: 64rem) {
  html.js-anim .omrade.omr-styrt {
    --omr-pin: 1;
    --omr-topp: calc(var(--meny-h) + clamp(0.5rem, 2svh, 1.25rem));
  }

  html.js-anim .omrade.omr-styrt .omr-hode {
    margin-bottom: calc(clamp(1.25rem, 2.6vw, 2rem) - var(--omr-topp));
  }

  html.js-anim .omrade.omr-styrt .omr-reise {
    display: block;
    height: calc(var(--omr-reise) * 100svh);
  }

  html.js-anim .omrade.omr-styrt .omr-scene {
    position: sticky;
    top: 0;
    height: 100svh;
    padding-top: var(--omr-topp);
  }

  html.js-anim .omrade.omr-styrt .omr-ark {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: none;
  }

  html.js-anim .omrade.omr-styrt .omr-vindu {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
  }

  html.js-anim .omrade.omr-styrt .omr-kartflate {
    position: absolute;
    inset: var(--kart-band) var(--kart-band-smal) var(--kart-band-smal) var(--kart-band);
    aspect-ratio: auto;
  }

  /* the list follows the plan: places not reached yet stand faint, the one being drawn has its number in the pale timber */
  html.js-anim .omrade.omr-styrt .omr-sone {
    opacity: var(--kart-svak);
    transition: opacity 0.45s var(--kart-mykt);
  }

  html.js-anim .omrade.omr-styrt .omr-sone.omr-naadd {
    opacity: 1;
  }

  html.js-anim .omrade.omr-styrt .omr-sone-nr {
    transition: background-color 0.45s var(--kart-mykt), color 0.45s var(--kart-mykt), border-color 0.45s var(--kart-mykt);
  }

  html.js-anim .omrade.omr-styrt .omr-sone.omr-aktiv .omr-sone-nr {
    border-color: var(--kart-aktiv);
    background: var(--kart-aktiv);
    color: var(--kart-aktiv-tekst);
  }

  /* the last row («og stedene imellom») lights with the last place, but only that place carries the filled number */
  html.js-anim .omrade.omr-styrt .omr-sone-rest.omr-aktiv .omr-sone-nr {
    border-color: var(--kart-linje-sterk);
    background: none;
    color: var(--tekst-lys);
  }

  /* start state: the names wait for their lines */
  html.js-anim .omrade.omr-styrt .omr-sted {
    opacity: 0;
  }
}

/* wide screens: the lead, the list and the buttons on the left, the sheet takes the height on the right */
@media (min-height: 30rem) and (min-width: 64rem) {
  html.js-anim .omrade.omr-styrt .omr-scene {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    padding-bottom: clamp(0.75rem, 2.4svh, 1.5rem);
  }

  html.js-anim .omrade.omr-styrt .omr-tekst {
    justify-content: space-between;
    gap: clamp(0.75rem, 2svh, 1.5rem);
    min-height: 0;
  }

  /* the list stands in the middle of the space between the lead and the buttons */
  html.js-anim .omrade.omr-styrt .omr-soner {
    margin: auto 0;
  }

  html.js-anim .omrade.omr-styrt .omr-sone {
    padding: clamp(0.45rem, 1.4svh, 1rem) 0;
  }

  html.js-anim .omrade.omr-styrt .omr-sone-navn {
    font-size: clamp(1.2rem, min(1rem + 0.8vw, 4svh), 1.75rem);
  }

  html.js-anim .omrade.omr-styrt .omr-ark {
    width: calc((min(100vw, var(--bredde)) - 2 * var(--kant)) * var(--kart-ark-andel));
  }
}

/* phones and tablets: the map, the list under it and the buttons, all on one screen; the lead stands under the title (omrader.js
   moves it there) */
@media (min-height: 34rem) and (max-width: 63.99rem) {
  html.js-anim .omrade.omr-styrt .omr-scene {
    grid-template-rows: minmax(0, 1fr) auto auto;
    row-gap: clamp(0.6rem, 1.6svh, 1rem);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(0.6rem, 1.8svh, 1rem));
  }

  html.js-anim .omrade.omr-styrt .omr-ark {
    grid-row: 1;
  }

  html.js-anim .omrade.omr-styrt .omr-soner {
    grid-row: 2;
  }

  html.js-anim .omrade.omr-styrt .omr-knapper {
    grid-row: 3;
  }

  html.js-anim .omrade.omr-styrt .omr-sone {
    padding: clamp(0.4rem, 1.1svh, 0.7rem) 0;
  }

  html.js-anim .omrade.omr-styrt .omr-sone-navn {
    font-size: 1.125rem;
  }

  html.js-anim .omrade.omr-styrt .omr-sone-nr {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.6875rem;
  }
}