:root {
    --sage: #9AAE87;
    --sage-dark: #7d9469;
    --sage-darker: #5f7a4b;
    --bg: #F7F6F2;
    --card: #FFFFFF;
    --text: #2E332A;
    --muted: #767F6F;
    --border: #E4E1D8;
    --error: #C24C4C;
    --success: #4C8C5A;
    --radius: 18px;
}

* { box-sizing: border-box; }

html {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    /* Mobilnettlesere (både Chrome/Android og Safari) blåser opp tekst
       automatisk på smale skjermer. Vi bestemmer størrelsene selv. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

input, textarea { user-select: text; }
/* Hjelpeteksten i tomme felt: appens egen dus-farge, ikke nettleserens
   (som er nesten usynlig på noen, og for mørk på andre) */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .65; }

/* body er den eneste boksen som faktisk scroller - html rører seg aldri,
   så mobilnettleseren trigges ikke til å vise/skjule adressefeltet ved korte sider.
   Bevisst valg: dette fjerner "dra ned for å oppdatere", akseptert siden alt uansett
   laster på nytt ved sidebytte i denne appen. */
body {
    -webkit-user-select: none;
    max-width: 480px;
    margin: 0 auto;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Rullefeltet skjules på PC - siden skal se ut som en app, ikke som et
       nettsted. Scrollingen virker som før der innholdet faktisk er høyere. */
    scrollbar-width: none;
}
body::-webkit-scrollbar { display: none; }

/* Admin-listene: topp/søkefelt står fast, bare selve lista scroller */
.page.admin-list {
    display: flex; flex-direction: column;
    /* Bunnmenyen ligger oppå sida, så høyden trekkes fra i stedet for å
       stole på padding - ellers forsvinner de nederste radene bak menyen */
    height: 100vh;
    height: calc(100dvh - var(--nav-h, 5rem));
    padding-bottom: 0;
    overflow: hidden;
}
.admin-scroll {
    flex: 1; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: .75rem;
}

/* Admin-sidene har svakt rødlig bakgrunn så man ser tydelig at man er i admin */
body.admin { --bg: #F5E9E4; background: var(--bg); }
html:has(body.admin) { background: #F5E9E4; }

/* Lås bakgrunnen fra å scrolle mens en modal er åpen */
body.modal-open { overflow: hidden; position: fixed; inset: 0; }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }

a { color: var(--sage-darker); text-decoration: none; }

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-box {
    width: 100%;
    max-width: 360px;
    background: var(--card);
    border-radius: var(--radius);
    padding: 2rem 1.75rem;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
}

.login-box .logo {
    display: block;
    margin: 0 auto 1.5rem;
    height: 48px;
    width: auto;
}

label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--muted);
    margin: 1rem 0 .35rem;
}

input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
    width: 100%;
    padding: .75rem .9rem;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    font-size: 1rem;
    /* Skjemafelt arver IKKE sidens font av seg selv - uten denne får
       textarea nettleserens monospace (skrivemaskin-utseende) */
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
    outline: none;
    transition: border-color .15s;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--sage);
}

/* Ingen +/- spinnere på tallfelt */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] { -moz-appearance: textfield; }

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .85rem 1.25rem;
    border: none;
    border-radius: 14px;
    background: var(--sage-dark);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

/* Hover KUN med ekte musepeker - se kommentaren ved .btn-secondary:hover.
   :not(:disabled) gjør at duste knapper aldri reagerer på pekeren. */
@media (hover: hover) {
    button:hover:not(:disabled), .btn:hover:not(:disabled) { background: var(--sage-darker); }
}

/* Registrer deg på innloggingssiden. EGEN farge, ikke grønn som "Logg inn":
   var den lik, leste folk den som samme knapp og fant aldri registreringen.
   Hover-regelen over ville gjort den grønn - derfor egen regel her også. */
.reg-btn { background: #E0A030; }
@media (hover: hover) {
    .reg-btn:hover:not(:disabled) { background: #C88C22; }
}

/* Pulserende rød ring rundt HELE opptaks-pilla - viser tydelig at opptaket går.
   Beholder den vanlige slagskyggen og legger en ekspanderende rød ring oppå. */
@keyframes pillePuls {
    0%   { box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 0 rgba(255, 40, 30, .6); }
    70%  { box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 13px rgba(255, 40, 30, 0); }
    100% { box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 0 rgba(255, 40, 30, 0); }
}
.tur-opptak-puls { animation: pillePuls 1s ease-out infinite; }
button:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }

.btn-secondary {
    background: transparent;
    color: var(--sage-darker);
    border: 1.5px solid var(--border);
}
/* Hover KUN på enheter som faktisk har en musepeker. På telefon "henger" :hover
   igjen etter et touch, så knappen blir stående med hover-fargen til man
   trykker et annet sted - det så ut som en bug. */
@media (hover: hover) {
    .btn-secondary:hover:not(:disabled) { background: var(--bg); }
}
/* En deaktivert knapp skal se HELT lik ut om man trykker på den - verken
   hover, trykk eller fokus skal endre noe. */
.btn-secondary:disabled,
.btn-secondary:disabled:hover,
.btn-secondary:disabled:active,
.btn-secondary:disabled:focus {
    background: transparent;
    color: var(--sage-darker);
    border-color: var(--border);
}
button:disabled { -webkit-tap-highlight-color: transparent; }

.error {
    color: var(--error);
    background: #FBEAEA;
    border-radius: 10px;
    padding: .6rem .8rem;
    font-size: .9rem;
    margin: .75rem 0;
}

.success {
    color: var(--success);
    background: #EAF3EA;
    border-radius: 10px;
    padding: .6rem .8rem;
    font-size: .9rem;
    margin: .75rem 0;
}

/* Snurrehjul ved lagring/POST */
body.busy, body.busy * { cursor: progress !important; }
.busy-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.35);
    z-index: 9999;
}
body.busy .busy-overlay { display: block; }
/* Synlig snurrehjul midt på skjermen mens noe jobber (opplasting, lagring...) -
   cursor:progress vises jo aldri på mobil, så uten dette føltes det som en frys. */
.busy-overlay::after {
    content: "";
    position: fixed;
    top: 50%; left: 50%;
    width: 42px; height: 42px;
    margin: -21px 0 0 -21px;
    border: 4px solid rgba(0,0,0,.15);
    border-top-color: var(--sage-dark, #5f7a4b);
    border-radius: 50%;
    animation: busySpin .8s linear infinite;
}
@keyframes busySpin { to { transform: rotate(360deg); } }

/* Modal */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(30,35,25,.45);
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
}
.modal-backdrop.open { display: flex; }
.modal {
    background: var(--card);
    border-radius: 22px 22px 0 0;
    width: 100%;
    max-width: 480px;
    padding: 1.5rem;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.modal-scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-right: .5rem; /* luft så scrollbaren ikke ligger oppå teksten */
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .28) transparent;
}
/* iOS/Android (WebKit) tegner en overlay-scrollbar som bare blinker til under
   draing - på lange lister så det ut som det ikke var mer å scrolle.
   -webkit-scrollbar tvinger fram en synlig, tynn en. (Samme oppskrift som
   #visitDesc lenger nede.) */
.modal-scroll::-webkit-scrollbar { width: 5px; -webkit-appearance: none; }
.modal-scroll::-webkit-scrollbar-track { background: transparent; }
.modal-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .28); border-radius: 999px;
}
.modal-actions {
    display: flex;
    gap: .75rem;
    margin-top: 1.25rem;
    flex-shrink: 0;
}
.modal-actions .btn-primary { order: 1; }
.modal-actions .btn-secondary { order: 2; }

.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom));
}
.bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    font-size: .7rem;
    color: var(--muted);
    padding: .35rem 0;
}
.bottom-nav a.active { color: var(--sage-darker); font-weight: 700; }
.bottom-nav svg { width: 22px; height: 22px; border-radius: 999px; box-sizing: content-box; padding: 4px; transition: background .15s, color .15s; }
.bottom-nav a.active svg { background: var(--sage); color: #fff; }

.page {
    /* Bunnluften følger bunnmenyens faktiske høyde (måles i main.js) så innhold aldri
       havner bak den, uansett skriftstørrelse/gestlinje på enheten */
    padding: 1rem 1.25rem calc(var(--nav-h, calc(5rem + env(safe-area-inset-bottom))) + .4rem);
}

/* Delt på tvers av hele appen (includes/tracker.php): funnet-kort og merke-feiring */
/* På mobil løftes toppoverskriften helt opp (GPS-baren tar litt plass) - på PC beholdes original luft */
@media (max-width: 600px) {
    h1.lift-mobile, div.lift-mobile { margin-top: 0 !important; }
}

/* Store tak-punkter i bildebeskjæreren så de er lette å treffe med fingeren */
.cropper-point {
    width: 20px !important; height: 20px !important;
    opacity: .85 !important; background-color: var(--sage-darker) !important;
    border-radius: 50%;
}
.cropper-point.point-n { top: -10px; margin-left: -10px; }
.cropper-point.point-s { bottom: -10px; margin-left: -10px; }
.cropper-point.point-e { right: -10px; margin-top: -10px; }
.cropper-point.point-w { left: -10px; margin-top: -10px; }
.cropper-point.point-ne { top: -10px; right: -10px; }
.cropper-point.point-nw { top: -10px; left: -10px; }
.cropper-point.point-se { bottom: -10px; right: -10px; width: 20px !important; height: 20px !important; }
.cropper-point.point-sw { bottom: -10px; left: -10px; }

.point-row { display: block; }
.point-row.hidden { display: none !important; }

/* Ligger som overlegg oppå forsidebildet; pointer-events:none slipper klikk gjennom til bildet */
.debug-pos {
    position: absolute; top: 0; left: 0; right: 0; z-index: 5;
    pointer-events: none;
    background: var(--bg); color: #8E44AD; font-weight: 700; font-size: .7rem; line-height: 1.3;
    padding: .4rem .6rem; text-align: center; font-family: monospace;
    border-radius: var(--radius) var(--radius) 0 0;
}

/* Liggende telefon: appen er laget for portrett - hele skjermen dekkes av
   snu-plakaten til man snur tilbake. Høydegrensen gjør at PC-er (som alltid
   er "liggende") aldri ser den. */
.snu-telefonen { display: none; }
/* Kun ekte touch-enheter (pointer: coarse) - ellers dukket den opp på PC når
   man zoomet inn i nettleseren (da blir viewporten "landscape" og lav) */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
    .snu-telefonen {
        display: flex; position: fixed; inset: 0; z-index: 99999;
        background: var(--bg); color: var(--text);
        align-items: center; justify-content: center; text-align: center;
        font-weight: 600; padding: 2rem;
    }
}

.gps-bar {
    position: fixed; top: 20px; right: 8px; z-index: 2500;
    display: flex; align-items: flex-end; gap: 2px;
    background: rgba(255,255,255,.85); padding: 4px 5px; border-radius: 7px;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    border: 2px solid transparent;
}
.gps-bar.good { border-color: var(--sage-darker); }
.gps-bar.medium { border-color: #E08C3E; }
.gps-bar.weak { border-color: #D9534F; }
/* 0 streker (ubrukelig signal, >100 m): rødt omriss OG lyserød bakgrunn */
.gps-bar.dead { border-color: #D9534F; background: #FBE9E9; }
/* GPS-nøyaktighet i meter, egen liten boks rett under GPS-baren - kun synlig for testere/superadmin */
.gps-acc {
    position: fixed; top: 50px; right: 8px; z-index: 2500;
    font-size: .62rem; font-weight: 700; color: #8E44AD; font-family: monospace;
    background: rgba(255,255,255,.85); padding: 1px 4px; border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.gps-acc:empty { display: none; }
.gps-bar span { width: 3px; border-radius: 1px; background: var(--border); }
.gps-bar span:nth-child(1) { height: 4px; }
.gps-bar span:nth-child(2) { height: 6px; }
.gps-bar span:nth-child(3) { height: 9px; }
.gps-bar span:nth-child(4) { height: 12px; }
.gps-bar span.on { background: var(--sage-darker); }
.gps-bar.medium span.on { background: #E08C3E; }
.gps-bar.weak span.on { background: #D9534F; }

/* ---- Type-ikon (PNG eller emoji): alle størrelser samlet HER ----
   Bytt tallene her, så endres ikonene overalt (kart, kort, lister, feiring).
   Størrelsesklassen setter både bredde/høyde (for PNG) og font-size (for emoji). */
.ticon-wrap { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

/* Turbilder: tre ruter ved siden av hverandre i bildemodalen */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
/* 9:16 - samme format som telefonkameraet tar bildene i. Kvadratiske celler ga
   brede svarte felt på sidene av hvert bilde */
.photo-cell {
    aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; cursor: pointer;
    background: #000; display: flex; align-items: center; justify-content: center;
}
/* contain, ikke cover: hele bildet skal vises, heller sorte felt på sidene
   enn at toppen av fjellet blir beskåret bort */
.photo-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.photo-cell-empty { background: var(--bg); border: 2px dashed var(--muted); color: var(--muted); font-size: 1.8rem; opacity: .6; }
/* Kameraknappen i øvre høyre hjørne av hver rad i besøkshistorikken.
   Juster de to størrelsene her hvis den skal opp eller ned i størrelse. */
/* Knappekolonnen til høyre i historikkradene: kamera øverst, deling under */
.row-actions {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: .4rem;
    /* Løfter kolonnen så kameraet står på linje med navnet - juster her */
    margin-top: -4px;
}
.photo-btn {
    flex-shrink: 0; width: 34px; height: 34px;
    padding: 0; border: 0; background: none;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.photo-btn img { width: 26px; height: 26px; object-fit: contain; display: block; }
/* Egen nedtrekksmeny - native <select> blinker og fyller hele skjermen på
   Android. Samme løsning som fylke-/typevelgeren på kartet. */
/* !important på bakgrunnen: den generelle button:hover-regelen lenger oppe
   gjør knappen mørkegrønn, og da forsvant teksten (som har egen farge satt
   inline per rolle) i grønt-på-grønt. */
.dd-btn, .dd-btn:hover {
    flex: 1; min-width: 0; width: auto; margin: 0;
    /* flex i stedet for text-align: teksten til venstre, pila helt ut til høyre */
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .45rem .75rem; font-size: 1rem; font-weight: 400;
    background: var(--bg) !important; color: var(--text);
    border: 1px solid var(--border); border-radius: 12px; cursor: pointer;
}
.dd-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-btn .dd-caret { flex-shrink: 0; color: var(--muted); }
.dd-menu {
    display: none; position: fixed; z-index: 3000;
    background: var(--card); border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.3);
    padding: .35rem; overflow-y: auto; min-width: 175px;
}
.dd-menu.open { display: block; }
.dd-menu button, .dd-menu button:hover {
    display: block; width: 100%; text-align: left; background: none; border: none;
    border-radius: 9px; padding: .55rem .75rem; font-size: .9rem; font-weight: 400;
    cursor: pointer; white-space: nowrap; color: var(--text);
}
@media (hover: hover) {
    .dd-menu button:hover { background: var(--bg); }
}
.dd-menu button.sel, .dd-menu button.sel:hover { background: #E7EDDF; font-weight: 700; }

/* Hamburgermenyen på profilen. Samme utseende som .dd-menu, men absolutt
   plassert under knappen (den sitter i en position:relative-wrapper), så den
   ikke trenger JS til posisjonering slik de fikserte nedtrekksmenyene gjør. */
/* Samme dusing som modalene. Ligger UNDER .hmeny (z-index 2900) men over alt
   annet, så klikket som lukker menyen fanges her og aldri treffer en knapp bak. */
.hmeny-teppe {
    display: none; position: fixed; inset: 0;
    background: rgba(30,35,25,.45);
    z-index: 2800;
}
.hmeny-teppe.aapen { display: block; }
.hmeny-liste {
    display: none; position: absolute; top: calc(100% + .35rem); right: 0; z-index: 3000;
    background: var(--card); border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.3);
    padding: .35rem; min-width: 175px;
}
.hmeny-liste.aapen { display: block; }
.hmeny-liste button, .hmeny-liste button:hover, .hmeny-liste a {
    display: block; width: 100%; text-align: left; background: none; border: none;
    border-radius: 9px; padding: .55rem .75rem; font-size: .9rem; font-weight: 400;
    margin: 0; cursor: pointer; white-space: nowrap; color: var(--text);
}
@media (hover: hover) {
    .hmeny-liste button:hover, .hmeny-liste a:hover { background: var(--bg); }
}
/* Faner i innstillinger-modalen. Flere kommer til etter hvert, så de skal tåle
   å bli mange: de skroller vannrett i stedet for å klemmes sammen. */
/* Ekte faner: teksten sitter PÅ en delelinje, og den aktive markeres med en
   tykk strek under. (Piller ble prøvd først, men de leste som knapper - ikke
   som faner man blar mellom.) */
.inst-faner {
    display: flex; gap: 0; margin-bottom: .8rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--border);
    /* Skjul selve scrollbaren - fanene skal KUNNE skrolles når de blir mange,
       men en synlig stripe under to faner ser ut som en feil */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* eldre Edge */
}
.inst-faner::-webkit-scrollbar { display: none; }   /* Chrome, Safari */
.inst-fane, .inst-fane:hover {
    width: auto; flex: 0 0 auto;
    background: none; border: none; border-radius: 0;
    /* Strek i samme tykkelse som den aktive, men usynlig - ellers hopper
       teksten når man bytter fane */
    border-bottom: 2.5px solid transparent;
    margin: 0 0 -1px;
    /* FAST høyde + flex-sentrering: knappene arver .btn (display:flex), og med
       ren padding ble høyden regnet ulikt for aktiv/inaktiv - teksten flyttet
       seg et par piksler ved hvert fanebytte. */
    height: 2.6rem; padding: 0 .9rem;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; font-weight: 600; line-height: 1;
    color: var(--muted); cursor: pointer; white-space: nowrap;
}
.inst-fane.aktiv, .inst-fane.aktiv:hover {
    color: var(--sage-darker);
    border-bottom-color: var(--sage-darker);
    background: none;
}
.inst-panel { display: none; }
.inst-panel.aktiv { display: block; }
/* Én innstilling: bryter til venstre, forklaring under teksten */
.inst-valg {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .7rem .8rem; margin-bottom: .5rem;
    background: var(--bg); border-radius: 14px; cursor: pointer;
}
.inst-valg input { width: auto; margin: .15rem 0 0; flex-shrink: 0; accent-color: var(--sage-darker); }
.inst-valg strong { display: block; font-size: .9rem; font-weight: 600; }
.inst-valg small { display: block; color: var(--muted); font-size: .78rem; margin-top: .15rem; }

/* En innstilling som ikke er en av/på-hake (karttype o.l.): samme boks som
   .inst-valg, men med innhold under hverandre i stedet for hake + tekst */
.inst-blokk {
    padding: .7rem .8rem; margin-bottom: .5rem;
    background: var(--bg); border-radius: 14px;
}
.inst-blokk > strong { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .5rem; }
/* To like brede knapper - den valgte er fylt, den andre er et omriss */
.kart-valg { display: flex; gap: .4rem; margin-bottom: .6rem; }
.kart-knapp, .kart-knapp:hover {
    flex: 1; width: auto;
    padding: .45rem .3rem; border-radius: 10px;
    border: 1.5px solid var(--border); background: var(--card);
    font-size: .82rem; font-weight: 600; color: var(--muted); cursor: pointer;
}
.kart-knapp.valgt, .kart-knapp.valgt:hover {
    background: var(--sage-darker); border-color: var(--sage-darker); color: #fff;
}
/* Bildet er 600x360 og vises i halv bredde - da blir det skarpt på mobil */
.kart-eksempel {
    display: block; width: 100%; max-width: 300px;
    aspect-ratio: 5 / 3; object-fit: cover;
    border-radius: 10px; border: 1px solid var(--border);
}
.kart-forklaring { display: block; color: var(--muted); font-size: .78rem; margin-top: .35rem; }

/* Faste lenker (last ned data, personvern) står nederst som en gruppe, skilt
   fra innstillingene over med én tynn strek. Klassen settes på den FØRSTE av
   dem, så streken havner over gruppa - ikke mellom lenkene.
   NB: !important på border-top er nødvendig - regelen over (.hmeny-liste a)
   har to selektorer og dermed høyere spesifisitet, så dens `border: none`
   ville ellers vinne uansett rekkefølge. */
.hmeny-bunn {
    margin-top: .15rem !important;
    padding-top: .45rem !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
}
/* Lenkene i bunngruppa står tett - de hører sammen */
.hmeny-bunn + a { padding-top: .3rem !important; }

/* Ramme rundt et bilde man kan sveipe i. Svart og klippende, så det er svart -
   ikke den hvite modalen - som kommer til syne når bildet glir ut. */
/* FAST høyde: uten den fikk ramma høyden fra bildet, og modalen hoppet mellom
   hvert format (et 16:9-bilde er mye lavere enn et stående). Bildene skaleres
   inn med object-fit:contain, så ingenting beskjæres - det blir bare svart
   over/under de som ikke fyller ramma. */
.bilde-ramme {
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    height: 68vh;
}
.bilde-ramme > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* Bilder man kan sveipe mellom (FormTurSveip i main.js).
   touch-action pan-y: loddrett scroll er nettleserens, vannrett er vår - uten
   den "svelger" nettleseren bevegelsen før touchmove rekker å reagere.
   -webkit-user-drag: ellers starter nettleserens egen bildedraing på PC.
   border-radius 0: RAMMA runder av og klipper. Hadde bildet sine egne runde
   hjørner, fikk det som ble dratt ut svarte hjørner mens naboen kom inn med
   skarpe - to ulike former i samme sveip. */
#ruteBildeVis, #pointBildeVis, #photoViewImg {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-drag: none;
    border-radius: 0;
}
/* Nabobildet som glir inn ved siden av under et sveip. Ligger nøyaktig oppå
   ramma og flyttes en hel bredde ut, så de to henger sammen som i et galleri. */
.bilde-nabo {
    position: absolute;
    inset: 0;              /* fyller ramma uansett hvor høy den er */
    width: 100%; height: 100%;
    background: #000;
    display: block;
    pointer-events: none;
    overflow: hidden;
}
/* Valgrader i "Slik vises du på topplisten"-modalen. Hele raden er klikkbar,
   ikke bare den lille haken - lettere å treffe med tommelen. */
.lb-valg {
    display: flex; align-items: center; gap: .6rem;
    background: var(--bg); border: 2px solid transparent;
    border-radius: 11px; padding: .4rem .6rem; margin-bottom: .3rem;
    cursor: pointer; transition: border-color .15s, background .15s, opacity .15s;
}
.lb-valg.valgt { border-color: var(--sage); background: #E7EDDF; }
/* Duset: profilbilde-raden når man er anonym, eller uten opplastet bilde */
.lb-valg.duset { opacity: .45; cursor: default; }
/* Selve input-en er skjult - .lb-hake er det man ser */
.lb-valg input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.lb-hake {
    flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%;
    border: 2px solid var(--border); background: var(--card);
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, background .15s;
}
/* Avkrysningsboksen (profilbildet) er firkantet, radioene runde */
.lb-valg input[type="checkbox"] ~ .lb-hake { border-radius: 6px; }
.lb-hake::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: #fff; transform: scale(0); transition: transform .15s;
}
.lb-valg input[type="checkbox"] ~ .lb-hake::after {
    width: 10px; height: 5px; border-radius: 0; background: none;
    border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
    transform: rotate(-45deg) scale(0); margin-top: -3px;
}
.lb-valg input:checked ~ .lb-hake {
    border-color: var(--sage-darker); background: var(--sage-darker);
}
.lb-valg input:checked ~ .lb-hake::after { transform: scale(1); }
.lb-valg input[type="checkbox"]:checked ~ .lb-hake::after { transform: rotate(-45deg) scale(1); }
.lb-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lb-tekst strong { font-size: .9rem; }
.lb-tekst small { color: var(--muted); font-size: .75rem; }

/* "Sveip for å bla" - vises nederst på bildet til man har sveipet én gang
   (huskes i localStorage). Uten hintet oppdaget folk ikke at det lå flere
   bilder bak, siden pilene er borte. */
.sveipe-hint {
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
    z-index: 3; pointer-events: none;
    display: flex; align-items: center; gap: .45rem;
    background: rgba(0, 0, 0, .62); color: #fff;
    font-size: .8rem; font-weight: 600; white-space: nowrap;
    border-radius: 999px; padding: .35rem .85rem;
    animation: sveipeHintInn .25s ease-out;
}
/* Pilene vugger sidelengs, så det er tydelig hva man skal gjøre */
.sveipe-hint span {
    font-size: 1.1rem; line-height: 1;
    animation: sveipeHintVugg 1.6s ease-in-out infinite;
}
.sveipe-hint span:last-child { animation-delay: .8s; }
@keyframes sveipeHintInn {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
/* Ut: glir ned og toner bort når man har sveipet - brå fjerning så rykkete ut */
.sveipe-hint.ut {
    animation: none;
    opacity: 0;
    transform: translate(-50%, 14px);
    transition: opacity .22s ease-in, transform .22s ease-in;
}
.sveipe-hint.ut span { animation: none; }
@keyframes sveipeHintVugg {
    0%, 100% { transform: translateX(0); opacity: .75; }
    50%      { transform: translateX(-3px); opacity: 1; }
}

/* Snurrehjul mens nabobildet lastes - vises bare til bildet er ferdig dekodet.
   Uten det blinket halvlastede piksler i bildet som gled inn. */
.bilde-nabo-spinner {
    position: absolute; left: 50%; top: 50%;
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: busySpin .8s linear infinite;
}

/* Deleknappen under kameraet - samme mål, så de står rett under hverandre */
.share-btn {
    flex-shrink: 0; width: 34px; height: 34px;
    padding: 0; border: 0; background: none;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.share-btn img { width: 26px; height: 26px; object-fit: contain; display: block; }
/* Grønt omriss = turen HAR en aktiv delingsside. Ramma tegnes med box-shadow
   (inset), så knappen beholder målene sine og raden ikke hopper. */
.share-btn.delt {
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px var(--sage);
}

/* Verifisert-hake rett etter punktnavnet i historikken (kun testere og oppover).
   Grå hake = ikke verifisert, grønn = verifisert. Testere klikker for å veksle. */
.verify-btn {
    flex-shrink: 0; width: 20px; height: 20px;
    padding: 0; border: 0; background: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle;
}
.verify-btn .vmark {
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; line-height: 1;
    background: var(--border); color: #fff;
    transition: background .15s;
}
.verify-btn.on .vmark { background: #1DB93C; }
/* Navn + hake på samme linje, haka klemt inntil navnet (ikke skjøvet ut av ellipsis) */
.visit-name-row { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.visit-name-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Avrundet beskjæringsramme for profilbildet (hjemmesiden og profilsiden) */
.cropper-round .cropper-view-box,
.cropper-round .cropper-face { border-radius: 16%; }
.ticon-img { object-fit: contain; display: block; }
.ticon-emoji { line-height: 1; }
/* Eget ikon inne i en knapp (Ta bilde / Velg fra galleri / Slett bildet) */
.btn-ikon { width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; margin-right: .3rem; }
/* Manglende ikon: rødt spørsmålstegn, så det er tydelig at noe skal lastes opp */
.ticon-missing { color: var(--error); font-weight: 700; }
.tsz-marker   { width: 24px;  height: 24px;  font-size: 24px; }  /* kartmarkør, ubesøkt */
.tsz-marker-v { width: 20px;  height: 20px;  font-size: 20px; }  /* kartmarkør, besøkt (i ring) */
.tsz-list     { width: 40px;  height: 40px;  font-size: 34px; }  /* lister og historikk */
.tsz-card     { width: 52px;  height: 52px;  font-size: 44px; }  /* punkt-/rapport-kort */
.tsz-preview  { width: 38px;  height: 38px;  font-size: 30px; }  /* type-velger i redigering */
.tsz-funnet   { width: 110px; height: 110px; font-size: 90px; }  /* FUNNET-feiring */
.tsz-merke    { width: 52px;  height: 52px;  font-size: 52px; }  /* merke-feiring (i gullringen) */
.ticon-img.tsz-funnet { margin: -.6rem auto; }
/* PNG-merker tegner mindre enn emoji på samme boks, og sitter litt høyt i
   gullringen - juster de to tallene her hvis det skal finstilles */
.ticon-img.tsz-merke  { width: 72px; height: 72px; margin-top: .5rem; }

.badge-overlay {
    display: none; position: fixed; inset: 0; background: rgba(30,35,25,.55);
    z-index: 3000; align-items: center; justify-content: center; padding: 1.5rem;
}
.badge-overlay.open { display: flex; }
.badge-card {
    background: var(--card); border-radius: 24px; padding: 2rem 1.75rem; text-align: center;
    max-width: 320px; width: 100%;
    animation: badgePop .5s cubic-bezier(.34,1.56,.64,1);
}
/* Lang stedsbeskrivelse dyttet knappene ut av skjermen. Nå scroller BARE
   beskrivelsen - ikonet, navnet og knappene står fast.
   Mobilen skjuler scrollbaren til man faktisk drar, så uten et hint ser lang
   tekst ut som om den slutter midt i. Derfor to ting:
     1) en alltid synlig, tynn scrollbar
     2) en myk uttoning nederst mens det er mer tekst igjen (fjernes av JS-en
        i tracker.js når man har scrollet til bunns) */
#visitDesc {
    max-height: calc(34vh - 10px);
    overflow-y: auto;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .28) transparent;
}
/* iOS/Android (WebKit): overlay-scrollbaren vises bare under draing -
   -webkit-scrollbar tvinger fram en synlig, tynn en */
#visitDesc::-webkit-scrollbar { width: 5px; -webkit-appearance: none; }
#visitDesc::-webkit-scrollbar-track { background: transparent; }
#visitDesc::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .28); border-radius: 999px;
}
/* Uttoningen ligger over bunnen av teksten, ikke i tekstflyten */
.visitdesc-wrap { position: relative; }
.visitdesc-wrap::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
    background: linear-gradient(to bottom, transparent, var(--card));
    pointer-events: none; opacity: 1; transition: opacity .15s;
}
/* Ikke mer å scrolle (eller teksten er kort): ingen uttoning */
.visitdesc-wrap.i-bunn::after, .visitdesc-wrap.kort::after { opacity: 0; }
.badge-icon { font-size: 4rem; line-height: 1; animation: badgeBounce 1s ease-in-out .5s 1; }
.badge-label { color: var(--sage-darker); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; margin-top: .75rem; }
.badge-name { font-size: 1.3rem; font-weight: 800; margin-top: .25rem; }
.badge-desc { color: var(--muted); font-size: .9rem; margin-top: .5rem; white-space: pre-line; }

/* Merke-boksen skal føles litt mer eksklusiv enn det vanlige funnet-kortet: gyllen ramme rundt ikonet */
#badgeOverlay .badge-icon {
    display: flex; align-items: center; justify-content: center;
    font-size: 3.25rem;
    /* Emoji-tegn tegnes lavt i tekstboksen sin - kompenser så de havner optisk midt i ringen */
    padding-bottom: 14px;
    width: 92px; height: 92px; margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle, #FBF3DC 0%, var(--card) 72%);
    border: 3px solid #C9A227;
    box-shadow: 0 0 0 4px var(--card), 0 0 0 5px #C9A22766;
}
#badgeOverlay .badge-label { color: #B8860B; }
@keyframes badgePop {
    0% { transform: scale(0) rotate(-10deg); opacity: 0; }
    60% { transform: scale(1.1) rotate(4deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}
/* Gjenåpnet fra besøkshistorikken (.stille settes i tracker.js): bare en rolig
   skalering inn - ingen vridning, og ikonet hopper ikke. Feiringen med full
   animasjon er forbeholdt selve FUNNET-øyeblikket ute på tur. */
.badge-overlay.stille .badge-card { animation: cardScaleIn .22s ease-out; }
.badge-overlay.stille .badge-icon { animation: none; }
@keyframes cardScaleIn {
    from { transform: scale(.88); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
@keyframes badgeBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Stjerneregn over merke-boksen når et nytt merke låses opp */
.star-rain {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.star-rain span {
    position: absolute; top: -10%; animation-name: starFall; animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
@keyframes starFall {
    from { transform: translateY(0) rotate(0deg); opacity: 1; }
    to { transform: translateY(115vh) rotate(360deg); opacity: 0; }
}