/* Fargene er vår design, i middelalderkirkens fargeverden: mørk skifer og natthimmel i bakgrunnen, kalket mur i teksten,
   og kalkmalerienes jordfarger som uthevinger. Hver type har sin farge og sin form (kirker runde, stavkirker ruter,
   klostre firkanter), og tilstanden sin fylling (ruiner hule, forsvunne kirker små og svake), så ingenting skilles bare med farge.
   Valgt 04.11.2026. */
:root {
  --hav: #0e0d12;
  --land: #1e1c21;       /* skifer */
  --kyst: #57525b;
  --grense: #3a363e;
  --tekst: #efe9df;      /* kalket mur */
  --svak: #b7afa5;
  --flate: #141217;
  --flate-2: #1e1b21;
  --kant: #36313a;
  --skygge: #08070a;     /* kanten rundt symbolene på kartet */
  --flate-glass: rgba(20, 18, 23, .94);
  /* Fargene per type (vår design) */
  --kirke: #e8dcc4;      /* kalkstein */
  --stavkirke: #d08a3c;  /* tjærebredd furu */
  --kloster: #c9573f;    /* rød oker fra kalkmaleriene */
  --uthev: #d9774f;
  --skrift: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --system: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--hav);
  color: var(--tekst);
  font-family: var(--system);
  overflow: hidden;
}
a { color: var(--uthev); }

/* Topplinja */
.topp {
  position: fixed; inset: 0 0 auto 0; z-index: 1150; /* over panelet (1100), så Kartvalg ikke skjules bak et åpent sted */
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: linear-gradient(var(--flate) 70%, transparent);
  pointer-events: none;
}
.topp > * { pointer-events: auto; }
.tittel h1 { margin: 0; font: 600 1.35rem/1.1 var(--skrift); letter-spacing: .01em; }
.tittel h1 a { color: var(--tekst); text-decoration: none; }
.undertittel { margin: 2px 0 0; color: var(--svak); font-size: .8rem; }

/* Hovedvalg: valgt side glør i rav */
.hovedvalg { display: flex; gap: 8px; }
.hovedvalg a {
  display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap;
  font: 600 .95rem/1 var(--skrift); letter-spacing: .05em; padding: 9px 16px; color: var(--tekst);
  background: var(--flate-2); border: 1px solid var(--kant); border-radius: 8px;
}
.hovedvalg a:hover { border-color: var(--svak); }
.hovedvalg a[aria-current] { color: var(--uthev); border-color: var(--uthev); }
.hovedvalg a:focus-visible { outline: 2px solid var(--uthev); outline-offset: 2px; }

/* Kartet */
#kart { position: fixed; inset: 0; background: var(--hav); }
.leaflet-container { background: var(--hav); font-family: var(--system); }
/* Detaljkartet farget mørkt og blåaktig, som havet om natten */
.detaljkart { filter: invert(1) grayscale(.85) brightness(.8) contrast(1.1) hue-rotate(180deg) sepia(.12); }
.leaflet-control-attribution { background: rgba(10, 16, 22, .82) !important; color: var(--svak) !important; }
.leaflet-control-attribution a { color: var(--tekst) !important; }
.leaflet-bar a { background: var(--flate-2); color: var(--tekst); border-color: var(--kant); }
.leaflet-bar a:hover { background: var(--kant); color: var(--tekst); }

/* Typene: hver type har sin farge (--farge), brukt av symbolene */
.type-kirke { --farge: var(--kirke); }
.type-stavkirke { --farge: var(--stavkirke); }
.type-kloster { --farge: var(--kloster); }
/* Stavkirkene er ruter, klostrene firkanter */
.type-stavkirke .symbol { border-radius: 2px; transform: rotate(45deg) scale(.85); }
.type-kloster .symbol { border-radius: 3px; }
.markor.type-stavkirke.valgt .symbol { transform: rotate(45deg) scale(1.3); }
/* Tilstanden: ruiner er hule (bare kanten), forsvunne kirker små og svake, ukjent tilstand har en mørk kjerne */
.tilstand-ruin .symbol { background: transparent !important; border: 3px solid var(--farge); }
.tilstand-borte .symbol { transform: scale(.6); opacity: .7; }
.tilstand-ukjent .symbol { -webkit-mask: radial-gradient(circle, transparent 0 2px, #000 2.5px); mask: radial-gradient(circle, transparent 0 2px, #000 2.5px); }
.type-stavkirke.tilstand-borte .symbol { transform: rotate(45deg) scale(.55); }
.markor.tilstand-borte.valgt .symbol { transform: scale(1.1); opacity: 1; }
.symbol[data-noyaktighet="wikidata"] { background: var(--farge); box-shadow: 0 0 0 2px var(--skygge), 0 0 0 3.5px var(--farge); }
.tegnforklaring .tilstand-ruin, .tegnforklaring .tilstand-borte { --farge: var(--kirke); }
.inventarmerke { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 6px 6px 1px 1px; background: var(--kloster); }

/* Byggehistorien og inventaret: årstall og hendelse */
.hendelser { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 3px; font-size: .9rem; }
.hendelser li { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; }
.hendelser .aar { color: var(--svak); font-variant-numeric: tabular-nums; }
.registerdel { margin: 0 0 6px; }
.registerdel summary { cursor: pointer; color: var(--svak); font-size: .88rem; padding: 4px 0; }

/* Grupper når kartet er zoomet langt ut: antallet i midten, fargeringen viser fordelingen på typene */
.gruppe { background: none; border: none; }
.gruppe span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--skygge), 0 2px 8px rgba(0, 0, 0, .6); cursor: pointer; }
.gruppe b { display: flex; align-items: center; justify-content: center; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 50%;
  background: var(--flate-glass); color: var(--tekst); font: 600 .78rem/1 var(--system); }
.gruppe:focus-visible span { outline: 2px solid var(--tekst); outline-offset: 2px; }

/* Symbolene for nøyaktighet, brukt både på kartet og i tegnforklaringen: innen 100 m lyser, registerets punkt uten oppgitt
   nøyaktighet er fylt uten glød, omtrentlig er stiplet */
.symbol { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; }
.symbol[data-noyaktighet="sted"] { background: var(--farge); box-shadow: 0 0 0 2px var(--skygge), 0 0 8px var(--farge); }
.symbol[data-noyaktighet="register"] { background: var(--farge); box-shadow: 0 0 0 2px var(--skygge); }
.symbol[data-noyaktighet="omrade"] { border: 2px dashed var(--farge); background: color-mix(in srgb, var(--farge) 25%, transparent); }
.markor { background: none; border: none; display: flex; align-items: center; justify-content: center; }
.markor .symbol { width: 14px; height: 14px; transition: transform .15s; }
.markor.valgt .symbol { transform: scale(1.5); }
/* Kjente felt er større; kildekontrollerte har en lys ring */
.markor.kjent .symbol, .kjent-symbol { width: 20px; height: 20px; }
.markor.verifisert .symbol, .verifisert-symbol { outline: 2px solid var(--tekst); outline-offset: 2px; }
.markor:not(.kjent) { opacity: .92; }
.kontrollvalg .symbol { --farge: var(--tekst); width: 12px; height: 12px; }
.verifisering .sitat { margin-top: 8px; font-size: .92rem; }
.langt-ute .markor .symbol { width: 9px; height: 9px; border-width: 1.5px; }
.langt-ute .markor.kjent .symbol { width: 13px; height: 13px; }
.langt-ute .markor.verifisert .symbol { outline-width: 1.5px; outline-offset: 1px; }
.langt-ute .markor .symbol[data-noyaktighet="sted"] { box-shadow: 0 0 0 1px var(--skygge); }
.tegnforklaring .symbol { margin-right: 6px; }
.tegnforklaring { --farge: var(--tekst); display: grid; gap: 6px; color: var(--svak); }

/* Kartvalg: typer, søk, tegnforklaring og «Om» samlet under én knapp */
.kartvalg { position: relative; margin-left: auto; }
.kartvalg-knapp {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: 600 .9rem/1 var(--skrift); letter-spacing: .04em; color: var(--tekst);
  background: var(--flate-2); border: 1px solid var(--kant); border-radius: 8px; padding: 9px 13px;
}
.kartvalg-knapp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.kartvalg-knapp:focus-visible, .om-lenke:focus-visible { outline: 2px solid var(--uthev); outline-offset: 2px; }
.kartvalg.apen .kartvalg-knapp { border-color: var(--uthev); color: var(--uthev); }
.kartvalg-panel {
  display: none; position: absolute; right: 0; top: 100%; z-index: 1200;
  width: min(300px, calc(100vw - 32px)); margin-top: 8px; padding: 6px 16px 14px;
  max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--flate-glass); border: 1px solid var(--kant); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55); font-size: .85rem;
}
.kartvalg-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.kartvalg.apen .kartvalg-panel { display: block; }
@media (hover: hover) { .kartvalg:hover .kartvalg-panel { display: block; } }
.kartvalg-panel h3 { margin: 12px 0 6px; font: 600 .72rem var(--system); letter-spacing: .08em; text-transform: uppercase; color: var(--svak); }
.kartvalg-panel .antall { margin: 8px 0 0; }
.kartvalg-panel p.liten { margin: 0; line-height: 1.4; }
.om-lenke { display: inline-block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--kant); width: 100%; color: var(--tekst); text-decoration: none; }
.om-lenke:hover { color: var(--uthev); }
body.visning-apen .kartvalg { display: none; }

.valgliste { display: grid; gap: 4px; }
.valgliste button {
  display: flex; align-items: center; gap: 8px; font: inherit; color: var(--tekst); text-align: left;
  background: none; border: 0; padding: 3px 2px; cursor: pointer; border-radius: 6px;
}
.valgliste button .liten { margin-left: auto; }
.valgliste button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.valgliste button:focus-visible { outline: 2px solid var(--uthev); }
.typemerke { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--farge); box-shadow: 0 0 6px var(--farge); }

.stedsok { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--kant); background: var(--flate-2); color: var(--tekst); font: inherit; }
.stedsok:focus-visible { outline: 2px solid var(--uthev); outline-offset: 1px; }
.treffliste { margin: 4px 0 0; }
.lenkeknapp { font: inherit; color: var(--uthev); background: none; border: none; padding: 0; text-decoration: underline; cursor: pointer; }

/* Panelet for et sted */
.panel {
  position: fixed; z-index: 1100; overflow-y: auto;
  top: 72px; right: 12px; bottom: 28px; width: min(400px, calc(100vw - 24px));
  padding: 20px 20px 24px;
  background: var(--flate); border: 1px solid var(--kant); border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.panel[hidden] { display: none; }
.lukk {
  position: sticky; top: 0; float: right; margin: -8px -8px 0 8px;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 1.4rem; line-height: 1; color: var(--tekst);
  background: var(--flate-2); border: 1px solid var(--kant); cursor: pointer;
}
.lukk:focus-visible { outline: 2px solid var(--uthev); outline-offset: 2px; }
.overlinje { margin: 0; color: var(--svak); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.panel h2 { margin: 4px 0 14px; font: 600 1.5rem/1.15 var(--skrift); }
.panel h3 { margin: 22px 0 8px; font-size: .78rem; color: var(--svak); text-transform: uppercase; letter-spacing: .08em; }
.panel p { margin: 0 0 8px; line-height: 1.5; }
.liten { font-size: .82rem; color: var(--svak); }
.sitat {
  margin: 0 0 6px; padding: 10px 14px; border-left: 3px solid var(--uthev);
  background: var(--flate-2); border-radius: 0 8px 8px 0; font: 1rem/1.5 var(--skrift);
}
.plassering { padding: 12px 14px; background: var(--flate-2); border-radius: 8px; }
/* Hvor sikkert stedet er: verifisert har en lys kant, de andre en svak */
.verifisering { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kant); background: var(--flate-2); }
.verifisering p { margin: 0 0 4px; }
.verifisering p:last-child { margin: 0; }
.verifisering.status-verifisert { border-color: var(--tekst); }
.verifisering.status-verifisert strong::before { content: '✓ '; }
.verifisering.status-tradisjon strong, .verifisering.status-avvist strong, .verifisering.status-usikker strong { color: var(--svak); }
.kildetype { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--kant); font-size: .72rem; }
.plassering p:last-child { margin-bottom: 0; }
.ukontrollert-merke {
  display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--kant); color: var(--svak); font-size: .75rem;
}
.fakta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: .9rem; }
.fakta dt { color: var(--svak); }
.fakta dd { margin: 0; }
.funnbilde { margin: 0 0 6px; }
.funnbilde img { display: block; width: 100%; max-height: 300px; object-fit: cover; border-radius: 10px; background: var(--flate-2); }
.funnbilde figcaption { margin-top: 6px; }
.lenkeliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

/* Liste over treff og flere steder på samme punkt */
.stedsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.stedsliste a { display: flex; align-items: baseline; gap: 8px; padding: 8px 6px; border-radius: 6px; color: var(--tekst); text-decoration: none; }
.stedsliste a:hover, .stedsliste a:focus-visible { background: var(--flate-2); }
.stedsliste .typemerke { width: 10px; height: 10px; }
.funnvalg .leaflet-popup-content-wrapper, .funnvalg .leaflet-popup-tip { background: var(--flate); color: var(--tekst); border: 1px solid var(--kant); }
.funnvalg .leaflet-popup-content { margin: 10px 12px; font: .9rem/1.3 var(--system); }
.funnvalg p { margin: 0 0 6px; color: var(--svak); }
.funnvalg .stedsliste { max-height: 40vh; overflow-y: auto; }
.funnvalg .knapp { color: var(--hav); }

/* Stedsnavn (Natural Earth) */
.stedsnavn { background: none; border: none; white-space: nowrap; }
.stedsnavn span {
  display: inline-block; transform: translate(-50%, -50%); font: 500 .72rem/1 var(--system); letter-spacing: .02em;
  color: #c9c7c1; text-shadow: 0 0 3px var(--skygge), 0 0 6px var(--skygge), 0 0 2px var(--skygge);
}
.stedsnavn span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 4px; border-radius: 50%; background: #c9c7c1; vertical-align: 1px; }

.knapp {
  display: inline-block; font: 600 .95rem var(--system); text-decoration: none; cursor: pointer;
  color: var(--hav); background: var(--uthev); border: 1px solid var(--uthev); border-radius: 10px; padding: 10px 18px;
}
.knapp:focus-visible { outline: 2px solid var(--tekst); outline-offset: 2px; }

/* Laget over kartet for om-siden */
.visning {
  position: fixed; inset: 0; z-index: 950; overflow-y: auto;
  padding: calc(84px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at top, rgba(26, 33, 41, .97), rgba(10, 16, 22, .98));
}
.visning[hidden] { display: none; }
.visning-innhold { max-width: 760px; margin: 0 auto; line-height: 1.55; }
.visning h2 { margin: 0 0 12px; font: 600 1.6rem/1.2 var(--skrift); }
.visning h3 { margin-top: 28px; font: 600 1.15rem var(--skrift); }
.ingress { color: var(--svak); max-width: 60ch; }

/* Språkvalget (NO/EN) */
.sprakvalg { display: flex; gap: 2px; padding: 2px; background: var(--flate-2); border: 1px solid var(--kant); border-radius: 8px; }
.sprakvalg button { font: 600 .78rem/1 var(--system); color: var(--svak); background: none; border: 0; border-radius: 6px; padding: 7px 8px; cursor: pointer; }
.sprakvalg button[aria-pressed="true"] { background: var(--kant); color: var(--tekst); }
.sprakvalg button:focus-visible { outline: 2px solid var(--uthev); outline-offset: 1px; }
body.visning-apen .sprakvalg { margin-left: auto; }

.hovedvalg .kort { display: none; }
.fortelling { font: 1rem/1.6 var(--skrift); }

/* Kildetypen ved hver kilde: forklaringen vises som tittel ved musepeker eller fokus */
.kildetype[title] { cursor: help; }
.kildetype:focus-visible { outline: 2px solid var(--uthev); outline-offset: 1px; }

/* Om-siden: tallene, forklaringen av hva et punkt viser, og de sammenleggbare metodedelene */
.tall-om { font-size: 1.02rem; }
.punktforklaring { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 10px 0 8px; }
.punktforklaring > div { padding: 12px 14px; border: 1px solid var(--kant); border-radius: 10px; background: var(--flate); }
.punktforklaring h4 { margin: 0 0 2px; font: 600 1rem var(--skrift); }
.punktforklaring p { margin: 0 0 8px; color: var(--svak); font-size: .88rem; }
.symbolliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .9rem; --farge: var(--tekst); }
.symbolliste .symbol { margin-right: 8px; width: 14px; height: 14px; }
.omdel { margin: 8px 0; border: 1px solid var(--kant); border-radius: 10px; background: var(--flate); }
.omdel summary { cursor: pointer; padding: 12px 14px; font: 600 1.02rem var(--skrift); }
.omdel[open] summary { border-bottom: 1px solid var(--kant); }
.omdel > :not(summary) { margin-left: 14px; margin-right: 14px; }
.omdel summary:focus-visible { outline: 2px solid var(--uthev); outline-offset: 2px; }

/* Tidslinjen: periodene med tall per type og land, dateringene og de kjente feltene */
.periode { margin: 22px 0; padding: 4px 16px 12px; border: 1px solid var(--kant); border-radius: 10px; background: var(--flate); }
.periode h3 { margin-top: 12px; }
.periode h3 .liten { font: 400 .9rem var(--system); }
.talltabell { border-collapse: collapse; font-size: .9rem; margin: 6px 0 12px; }
.talltabell th, .talltabell td { padding: 5px 12px 5px 0; text-align: right; border-bottom: 1px solid var(--kant); font-variant-numeric: tabular-nums; }
.talltabell th:first-child { text-align: left; font-weight: 400; }
.talltabell thead th { font: 600 .72rem var(--system); letter-spacing: .08em; text-transform: uppercase; color: var(--svak); }
.talltabell .typemerke { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: 0; }
.dateringsliste { margin: 4px 0 12px; padding-left: 18px; columns: 2 260px; }

/* Bildene i panelet: små bilder under det store */
.bilderad { display: flex; gap: 6px; overflow-x: auto; margin: 4px 0 14px; padding-bottom: 4px; }
.bilderad button { flex: none; width: 64px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 6px; background: var(--flate-2); cursor: pointer; overflow: hidden; }
.bilderad button[aria-pressed="true"] { border-color: var(--uthev); }
.bilderad button:focus-visible { outline: 2px solid var(--uthev); outline-offset: 1px; }
.bilderad img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bildevalg {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 6px 8px; font: inherit; color: var(--tekst);
  background: var(--flate-2); border: 1px solid var(--kant); border-radius: 8px; cursor: pointer;
}
.bildevalg .liten { margin-left: auto; }
.bildevalg[aria-pressed="true"] { border-color: var(--uthev); color: var(--uthev); }
.bildevalg:focus-visible { outline: 2px solid var(--uthev); }
.bildeikon { width: 14px; height: 11px; border: 1.6px solid currentColor; border-radius: 2px; background: linear-gradient(135deg, transparent 55%, currentColor 56% 64%, transparent 65%); }

/* Runeinnskrifter i Runer: et merke formet som en reist stein (ikke et runetegn; Unicode-runer vises aldri) */
.runemerke { flex: none; display: inline-block; width: 9px; height: 13px; border: 2px solid var(--stavkirke); border-radius: 5px 5px 2px 2px; }

/* Kjente felt: listene i kolonner per land */
.kjente-sok { max-width: 360px; margin: 6px 0 4px; }
.stedsliste.kolonner { display: block; columns: 2 300px; column-gap: 24px; }
.stedsliste.kolonner li { break-inside: avoid; }
.stedsliste li[hidden], .landgruppe[hidden] { display: none; }
.register-tekst { white-space: pre-line; font-size: .95rem; }
.fakta { margin-bottom: 8px; }

/* Mobil: panelet blir et ark nedenfra */
@media (max-width: 640px) {
  .topp { gap: 8px; }
  .tittel h1 { font-size: 1.1rem; }
  .undertittel { display: none; }
  .hovedvalg a { padding: 8px 12px; font-size: .88rem; }
  .kartvalg-knapp span { display: none; }
  .hovedvalg .lang { display: none; }
  .hovedvalg .kort { display: inline; }
  .kartvalg-knapp { padding: 9px; }
  .panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 62vh; border-radius: 14px 14px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .visning { padding-top: calc(110px + env(safe-area-inset-top)); }
}

/* Merknad i panelet: for eksempel danske kirker der vi ikke har funnet tidsperioden */
.merknad { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; border: 1px dashed var(--stavkirke); background: var(--flate-2); font-size: .88rem; }
.sitat-kort { display: block; margin: 4px 0 2px; padding-left: 8px; border-left: 2px solid var(--kant); font: .92rem/1.45 var(--skrift); }