/* DNT-profil: farger fra DNTs visuelle identitet. Lyse, varme flater,
   sort tekst, DNT Rød kun som aksent.

   Alt innhold ligger i .skjerm, en fast 16:9-flate som alltid får plass i
   vinduet og sentreres. Størrelser bruker rem, der 1 rem er 1 % av flatens
   høyde (satt som font-size på html), så layouten ser lik ut på en TV, i et
   smalt vindu og i et stående vindu. Skjermen kjører Tizen 7.0 med
   Chromium 94, som ikke kan cqh, dvh eller container-type. Nyere CSS må
   derfor ha en enkel fallback foran seg i kaskaden.

   Flaten har tre kolonner: områdekort til venstre, kartet av Sør-Norge i
   midten, områdekort til høyre. Områdefargene settes av app.js som --farge
   på kortet og på polygonet, ut fra tabellen FARGER der. */

@font-face {
  font-family: "ABC Social";
  src: url("fonts/ABCSocial-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "ABC Social";
  src: url("fonts/ABCSocial-Light.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}

:root {
  --lys-beige: #FFF7E9;
  --moerk-beige: #F8E6C6;
  --blaa: #C5DCEA;
  --lys-groenn: #E9F2D9;
  --moerk-groenn: #597E61;
  --hvit: #FFFFFF;
  --dnt-roed: #D82D20;
  --gul: #FFF097;
  --oransje: #FFB674;
  --lys-roed: #FFC8C3;
  --sort: #000000;
  --graa: #5a5651;
  --vann: #8FBBD6;       /* innsjøer og elver på kartet */

  --font: "ABC Social", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* 1 rem er 1 % av flatens høyde. Første linje holder på en liggende 16:9-TV,
   den andre tar over i smale og stående vinduer der nettleseren kan min(). */
html {
  font-size: 1vh;
  font-size: min(1vh, calc(100vw * 9 / 16 / 100));
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--lys-beige);
  color: var(--sort);
  font-family: var(--font);
  font-weight: 300;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

/* Fast 16:9-flate som fyller vinduet så langt formatet tillater. De to første
   linjene er fallback for nettlesere uten min(). */
.skjerm {
  --marg: 1.8rem;
  width: 100vw;
  height: 100vh;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  display: flex;
  flex-direction: column;
  padding: var(--marg) calc(var(--marg) * 1.4);
  gap: var(--marg);
  overflow: hidden;
}

/* Toppen: logo, tittel, legende og dato på én linje. */
.topp {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  flex: 0 0 auto;
}
.logo {
  height: 6.8rem;
  width: 6.8rem;
  object-fit: contain;
}
.tittel h1 {
  margin: 0;
  font-weight: 400;
  font-size: 4.6rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.undertittel {
  margin: 0.4rem 0 0;
  font-size: 2.2rem;
  color: var(--graa);
}
.forklaring {
  margin-left: auto;
  display: flex;
  gap: 2.6rem;
  font-size: 2.1rem;
  color: var(--graa);
}
.forklaring .prikk {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.8rem;
}
.idag {
  margin-left: 5rem;
  text-align: right;
  font-size: 2.6rem;
  color: var(--graa);
}
.idag strong {
  display: block;
  font-weight: 400;
  color: var(--sort);
  font-size: 3.2rem;
}

/* «Sist oppdatert» som en stille linje helt nederst til høyre. */
.oppdatert {
  flex: 0 0 auto;
  margin-top: calc(var(--marg) * -0.55);
  text-align: right;
  font-size: 1.7rem;
  color: var(--graa);
}
.oppdatert.gammel {
  color: var(--dnt-roed);
  font-weight: 400;
}

/* Tre kolonner: kort, kart, kort. Kartkolonnen er bred nok til at et kart
   på ca. 85 % av flatens høyde får plass uten luft på sidene. */
.kartflate {
  position: relative;          /* for streklaget */
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60rem minmax(0, 1fr);
  gap: var(--marg);
}
.laster, .feil {
  grid-column: 1 / -1;
  align-self: center;
  text-align: center;
  font-size: 3rem;
  color: var(--graa);
}

/* Kortene har høyde etter innholdet, så avstanden mellom radene er lik i
   alle kort. Ledig plass i kolonnen legges mellom kortene. */
.kolonne {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--marg);
  min-height: 0;
}

/* Områdekort */
.kort {
  flex: 0 0 auto;
  background: var(--hvit);
  border-radius: 1.6rem;
  padding: 1.5rem 2.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.04);
}
.kort h2 {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0 0 0.6rem;
  padding-bottom: 0.7rem;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1.1;
  border-bottom: 0.3rem solid var(--dnt-roed);
}
/* Fargemarkør som binder kortet til området på kartet. */
.kort h2::before {
  content: "";
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.6rem;
  background: var(--farge, var(--moerk-beige));
}
.kort.uten-farge h2::before {
  display: none;
}
.kort ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* Radpolstringen er 0.3rem på alle sidene. Med 0.4rem var venstre kolonne på
   side 1 (16 hytter i fire kort) 21 px høyere enn plassen sin ved 1920 x 1080,
   usynlig fordi kolonnen ikke klipper, men én hytte til hadde veltet layouten. */
.hytte {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem;
  padding: 0.3rem 0;
  font-size: 2.05rem;
  line-height: 1.15;
}
.hytte + .hytte {
  border-top: 1px solid var(--moerk-beige);
}
.hytte .navn {
  font-weight: 400;
  white-space: nowrap;
}
.hytte .status {
  text-align: right;
  color: var(--graa);
  font-size: 1.8rem;
  line-height: 1.2;
}
.hytte .status .niva {
  color: var(--sort);
  font-weight: 400;
}
.hytte .status .snart {
  color: var(--dnt-roed);
  font-weight: 400;
}
.hytte.stengt .navn { color: var(--graa); font-weight: 300; }

/* Statusprikk i listene og legenden */
.prikk {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  flex: 0 0 auto;
  vertical-align: middle;
}
.prikk.betjent { background: var(--moerk-groenn); }
.prikk.selvbetjent { background: var(--oransje); }
.prikk.stengt { background: var(--dnt-roed); }
.prikk.ukjent { background: var(--graa); }

/* Kartet */
.kart {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kart svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.kart .laster,
.kart .feil {
  font-size: 2.4rem;
}

/* Tegnet uttrykk: hvit landflate mot beige bakgrunn med tynn mørk strek langs
   kysten (Sør-Norge), eller mot blå sjø uten strek (Oslomarka). Lagene tegnes
   i denne rekkefølgen: hav (bare kart med «hav» i kartfila), land, områder,
   vann, grense (bare kart uten hav), byer, hytter. */
.hav {
  fill: var(--vann);
  stroke: none;
}
.land path {
  fill: var(--hvit);
  stroke: none;
}
.grense path {
  fill: none;
  stroke: var(--graa);
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* DNT-områdene fra ut.no, fylt i områdets farge. Tynn hvit kant skiller
   områder som grenser til hverandre. */
.omrade {
  fill: var(--farge, var(--moerk-beige));
  stroke: var(--hvit);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Vann i en tydeligere blå enn områdefargene, så Mjøsa ikke forveksles med Jotunheimen. */
.innsjo {
  fill: var(--vann);
  stroke: none;
}
.elv {
  fill: none;
  stroke: var(--vann);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Byer: prikk og navn med hvit kant rundt bokstavene, så de leses oppå kystlinja. */
.byer circle {
  fill: var(--sort);
}
.byer text {
  font-family: var(--font);
  font-weight: 400;
  font-size: 24px;              /* viewBox-enheter, ca. 2 % av skjermhøyden */
  fill: var(--sort);
  stroke: var(--hvit);
  stroke-width: 5px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  dominant-baseline: middle;
}

/* Hyttene på kartet, farget etter dagens status */
.hyttepunkt {
  stroke: var(--hvit);
  stroke-width: 2.5;
}
.hyttepunkt.betjent { fill: var(--moerk-groenn); }
.hyttepunkt.selvbetjent { fill: var(--oransje); }
.hyttepunkt.stengt { fill: var(--dnt-roed); r: 7; }
.hyttepunkt.ukjent { fill: var(--graa); }

/* Streker fra kort til område, i et lag over hele flaten. */
.streker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.strek {
  stroke: var(--graa);
  stroke-width: 0.2rem;
  stroke-linecap: round;
}
.strekende {
  fill: var(--graa);
}

/* ---------- Side 2: selvbetjente hytter (selvbetjente.html) ---------- */

/* Teller i kortoverskriften («10 hytter · 8 åpne») i listevarianten. */
.kort h2 .teller {
  margin-left: auto;
  font-size: 1.7rem;
  font-weight: 300;
  color: var(--graa);
  white-space: nowrap;
}

/* Listevarianten: alle navn i to spalter fylt kolonnevis, så radene ligger på
   linje på tvers. Mindre skrift enn side 1, fordi venstre kolonne har 30 hytter. */
.kort.liste ul {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
}
.kort.liste .hytte {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  font-size: 1.8rem;
  border-top: 1px solid var(--moerk-beige);
}
.kort.liste .hytte.spaltestart {
  border-top: none;
}
.kort.liste .prikk {
  width: 1.3rem;
  height: 1.3rem;
}
.kort.liste .navn {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Kort tidsangivelse bak navnet: «til 15. feb.» i grått, «om 3 dager» i rødt. */
.hytte .naar {
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--graa);
  white-space: nowrap;
  text-align: right;
}
.hytte .naar.snart {
  color: var(--dnt-roed);
  font-weight: 400;
}

/* Bunnlinja på side 2: merknad til venstre, «Sist oppdatert» til høyre. */
.bunn {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  margin-top: calc(var(--marg) * -0.55);
}
.bunn .oppdatert {
  margin-top: 0;
}
.merknad {
  margin: 0;
  font-size: 1.7rem;
  color: var(--graa);
}

/* På side 2 og 3 er selvbetjent og ubetjent den normale åpne tilstanden, ikke
   et redusert tilbud slik det er ved en betjent hytte på side 1. Åpne hytter
   får derfor samme grønne som betjent, og oransje brukes bare på side 1. */
body[data-side="selvbetjente"] .prikk.selvbetjent,
body[data-side="oslomarka"] .prikk.selvbetjent {
  background: var(--moerk-groenn);
}
body[data-side="selvbetjente"] .hyttepunkt.selvbetjent,
body[data-side="oslomarka"] .hyttepunkt.selvbetjent {
  fill: var(--moerk-groenn);
}

/* Mindre hytteprikker på side 2 og 3, med tynnere hvit kant som skiller
   prikker som overlapper. r skal være lik prikkR for disse sidene i app.js. */
body[data-side="selvbetjente"] .hyttepunkt,
body[data-side="oslomarka"] .hyttepunkt {
  stroke-width: 1.5;
}
body[data-side="selvbetjente"] .hyttepunkt.stengt,
body[data-side="oslomarka"] .hyttepunkt.stengt {
  r: 5.5;
}

/* ---------- Side 3: Oslomarka og Oslofjorden (oslomarka.html) ---------- */

/* Navnet skal alltid vises helt. Navnekolonnen får den bredden den trenger,
   og tilleggsteksten til høyre (sengetall, «Betjent», tidsangivelse og
   nøkkelikon) får resten. Blir det for trangt, er det den som skal kortes. */
body[data-side="oslomarka"] .kort.liste .hytte {
  grid-template-columns: auto auto minmax(0, 1fr);
}
body[data-side="oslomarka"] .kort.liste .navn {
  overflow: visible;
  text-overflow: clip;
}
.hytte .meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--graa);
  white-space: nowrap;
}
.hytte .meta .snart {
  color: var(--dnt-roed);
  font-weight: 400;
}

/* Låsikonene for nøkkeltype (lukket hengelås for egen nøkkel, åpen for ulåst),
   strektegnet i samme grå som teksten. Symbolene ligger i oslomarka.html, og
   legenden i toppen bruker samme klasse. */
.ikon {
  height: 1.7rem;
  width: 1.7rem;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.forklaring .ikon {
  height: 2rem;
  width: 2rem;
  margin-right: 0.8rem;
}