/* ==========================================================================
   MJF Auksjon — stilark (redesign, august 2026)
   ==========================================================================

   Erstatter det gamle stilarket. Alle klassenavn er beholdt, så ingen
   PHP-fil må endres for at dette skal virke — last opp fila og siden bytter
   utseende.

   Paletten er hentet fra MJB-nett:

       #21759b   petrol — meny, bunn, lenker, hovedknapper
       #1b5f7d   mørk petrol — hover, overskrifter
       #e5ae4a   oker — testbanner, frister, partimerke
       #c1272d   MJF-rødt — kun i logoen
       #f2f2f3   sidebakgrunn
       #1d1f20   brødtekst

   Formspråket er teknisk tegning: firkantede hjørner, hårfine rammer,
   gjennomsiktige kort med registreringsmerker i hjørnene. Ingen avrundede
   bokser, ingen slagskygger.

   Fonter: Barlow Condensed til overskrifter over Barlow til brødtekst.
   CSP-en tillater bare 'self', så de MÅ selvhostes — legg .woff2-filene i
   /fonter/ (se @font-face nederst i denne bolken). Uten filene faller
   siden tilbake på systemfonter, og alt annet virker som før.
   ========================================================================== */

/* Selvhostede fonter, hentet fra google-webfonts-helper (gwfh.mranftl.com),
   latin-tegnsettet — det dekker æ, ø og å. Filnavnene er dem verktøyet gir,
   beholdt uendret: «v13» er Googles fontversjon, og å ha den i navnet gjør at
   en senere oppdatering ikke serveres fra nettleserens cache.
   Fjern blokka hvis dere heller vil bruke systemfont. */
@font-face {
    font-family: "Barlow";
    src: url("fonter/barlow-v13-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("fonter/barlow-v13-latin-600.woff2") format("woff2");
    font-weight: 600 700;
    font-display: swap;
}
@font-face {
    font-family: "Barlow Condensed";
    src: url("fonter/barlow-condensed-v13-latin-600.woff2") format("woff2");
    font-weight: 600 700;
    font-display: swap;
}

:root {
    --mjf:          #21759b;
    --mjf-mork:     #1b5f7d;
    --mjf-lys:      #2581aa;
    --mjf-hover:    #164f68;
    --mjf-100:      #e8f2f7;
    --mjf-200:      #cfe4ee;

    --varsel:       #e5ae4a;
    --varsel-tekst: #33240c;
    --varsel-100:   #fbf1de;

    --tekst:        #1d1f20;
    --tittel:       #1d1f20;
    --dempet:       #6b6e70;
    --ramme:        rgba(29, 31, 32, .16);
    --ramme-svak:   rgba(29, 31, 32, .08);
    --bakgrunn:     #f2f2f3;
    --flate:        #fff;
    --felt:         #e9e9ea;
    --merke:        rgba(29, 31, 32, .55);

    --ok-bg:        #e7f2ec;
    --ok-kant:      #2e7d4f;
    --feil-bg:      #fbeceb;
    --feil-kant:    #b3372a;
    --info-bg:      var(--mjf-100);
    --advarsel-bg:  var(--varsel-100);
    --advarsel-kant:#b78103;

    --overskrift:   "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --brodtekst:    "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --brei:         1100px;
    --radius:       0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--brodtekst);
    font-size: 16px;
    line-height: 1.55;
    color: var(--tekst);
    background: var(--bakgrunn);
}

a { color: var(--mjf-mork); text-underline-offset: 3px; }
a:hover { color: var(--mjf-hover); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--mjf); outline-offset: 2px; }
::selection { background: rgba(33, 117, 155, .3); }

h1, h2, h3 {
    font-family: var(--overskrift);
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.12;
    color: var(--tittel);
}

h1 { font-size: 2.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.85rem; margin: 2.25rem 0 .85rem; color: var(--mjf-mork); }
h3 { font-size: 1.35rem; margin: 1.5rem 0 .5rem; }

hr { border: 0; border-top: 1px solid var(--ramme); margin: 2rem 0; }

/* Lesebredde for rene tekstsider.
   -------------------------------------------------------------------------
   `main` er 1100 px, som er riktig for en objektliste og for bredt for løpende
   tekst — en linje på 1100 px tvinger øyet til å lete etter neste linjes
   begynnelse.

   Brukes av faq.php, vilkaar.php og personvern.php — de tre rene tekstsidene.

   BARE DIREKTE BARN. Det er ikke en forglemmelse: tabeller, meldingsbokser og
   skjemaer inni sidene skal beholde full bredde. En gebyrtabell klemt til 72ch
   er verre å lese, ikke bedre.

   Overskriftene er MED i innsnevringen med vilje. En h2 som starter til venstre
   for teksten under seg ser ut som et innrykk, ikke som en overskrift. */
.lesetekst > h2,
.lesetekst > h3,
.lesetekst > p,
.lesetekst > ul,
.lesetekst > ol { max-width: 72ch; }

/* --------------------------------------------------------------------------
   Registreringsmerker
   --------------------------------------------------------------------------
   Kryssene i hjørnene tegnes med gradienter på et ::before-lag som ligger
   6 px utenfor boksen. Ingen ekstra markup, ingen data-URI (CSP-en tillater
   ikke det siste). */

.objektkort,
.valg,
.prisboks,
.admin-seksjon,
.beskrivelse,
.levering,
.galleri { position: relative; }

.objektkort::before,
.valg::before,
.prisboks::before,
.admin-seksjon::before,
.beskrivelse::before,
.levering::before,
.galleri::before {
    content: "";
    position: absolute;
    inset: -6px;
    pointer-events: none;
    background-image:
        linear-gradient(var(--merke), var(--merke)), linear-gradient(var(--merke), var(--merke)),
        linear-gradient(var(--merke), var(--merke)), linear-gradient(var(--merke), var(--merke)),
        linear-gradient(var(--merke), var(--merke)), linear-gradient(var(--merke), var(--merke)),
        linear-gradient(var(--merke), var(--merke)), linear-gradient(var(--merke), var(--merke));
    background-repeat: no-repeat;
    background-size: 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px;
    background-position:
        left 5px top 0, left 0 top 5px,
        right 5px top 0, right 0 top 5px,
        left 5px bottom 0, left 0 bottom 5px,
        right 5px bottom 0, right 0 bottom 5px;
}

/* --------------------------------------------------------------------------
   Header og bunn
   -------------------------------------------------------------------------- */

.topp { background: var(--mjf); }

.topp-inn {
    max-width: var(--brei);
    margin: 0 auto;
    padding: .8rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.logo {
    text-decoration: none;
    font-family: var(--overskrift);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Logomerket som TEKST: «MJF» i rødt på en hvit, firkantet plate.
   Brukes nå bare av sjekk-filer.php og sjekk-gebyr.php, som har sitt eget
   sidehode. Menyen på de vanlige sidene bruker .logo-merke lenger ned —
   der ligger strektegningen rett på bakgrunnen, uten plate. */
.logo-mjf {
    background: #fff;
    color: var(--mjf);
    padding: .05rem .45rem;
    border-radius: 0;
}

.logo-rest { color: #fff; font-weight: 400; margin-left: .1rem; }

.topp nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; }

.topp nav a {
    color: #fff;
    text-decoration: none;
    padding: .25rem 0;
    border-bottom: 2px solid transparent;
    font-size: .95rem;
}

.topp nav a:hover { color: var(--varsel); border-bottom-color: var(--varsel); }

.hilsen { color: var(--mjf-200); font-size: .88rem; white-space: nowrap; }

main { max-width: var(--brei); margin: 0 auto; padding: 2rem 1.25rem 4rem; }

.bunn {
    background: var(--mjf);
    color: #dbeaf2;
    font-size: .9rem;
    margin-top: 3rem;
}

.bunn-inn {
    max-width: var(--brei);
    margin: 0 auto;
    padding: 2rem 1.25rem;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.bunn a { color: #dbeaf2; }
.bunn a:hover { color: #fff; }
.bunn strong { color: #fff; }
.bunn-note { color: #bcd9e7; font-size: .85rem; }

/* Copyright-stripen. Krever én linje markup i sidefot(); se notatet i
   handover-teksten. */
.bunn-copyright {
    background: var(--mjf-mork);
    color: #a8cfe0;
    font-size: .78rem;
}

.bunn-copyright div {
    max-width: var(--brei);
    margin: 0 auto;
    padding: .75rem 1.25rem;
}

/* --------------------------------------------------------------------------
   Testbanner
   -------------------------------------------------------------------------- */

.testbanner {
    background: var(--varsel);
    color: var(--varsel-tekst);
    text-align: center;
    padding: .65rem 1rem;
    font-size: .95rem;
    line-height: 1.45;
    border-bottom: none;
}

.testbanner strong { color: var(--varsel-tekst); }

/* --------------------------------------------------------------------------
   Sted og levering
   -------------------------------------------------------------------------- */

.levering {
    border: 1px solid var(--ramme);
    border-radius: 0;
    background: transparent;
    padding: .7rem .9rem;
    margin: 1.1rem 0;
}

/* --------------------------------------------------------------------------
   Meldinger
   -------------------------------------------------------------------------- */

.melding {
    padding: .85rem 1rem;
    border: 1px solid var(--ramme);
    border-radius: 0;
    background: transparent;
    margin: 1rem 0;
}

.melding.ok       { background: var(--ok-bg);       border-color: var(--ok-kant); }
.melding.feil     { background: var(--feil-bg);     border-color: var(--feil-kant); }
.melding.info     { background: var(--info-bg);     border-color: var(--mjf); }
.melding.advarsel { background: var(--advarsel-bg); border-color: var(--advarsel-kant); }

.melding p:first-child { margin-top: 0; }
.melding p:last-child  { margin-bottom: 0; }

/* 1rem, ikke .9rem: --dempet på --bakgrunn gir ca. 4,7:1, som er AA for
   brødtekst men marginalt for LITEN tekst (kodegjennomgangen 26.08.2026,
   punkt B7). Størrelsen løftet i stedet for å endre --dempet — den brukes
   over tyve andre steder, og en global endring ville flyttet mer enn dette
   ene. */
.hjelpetekst { color: var(--dempet); font-size: 1rem; }

/* HONNINGKRUKKA i registreringsskjemaet. Se registrering_bot_sperre() i
   includes/auth.php for hvorfor feltet finnes.

   position: absolute og left: -9999px framfor display: none. Noen bots hopper
   over felt som er display:none nettopp fordi det er den opplagte måten å
   skjule en honningkrukke på — mens et felt som er flyttet ut av skjermen ser
   ut som et vanlig felt i DOM-en. Effekten for et menneske er den samme.

   Feltet har i tillegg aria-hidden og tabindex="-1" i markupen, så verken
   skjermleser eller tabulatortast havner i det. */
.skjult-felt {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.dempet      { color: var(--dempet); }
.liten       { font-size: .85rem; }
.ingress     { font-size: 1.15rem; color: var(--tekst); opacity: .85; max-width: 60ch; }
.tilbake     { margin-bottom: .5rem; font-size: .9rem; }

/* --------------------------------------------------------------------------
   Faner og filtrering
   -------------------------------------------------------------------------- */

.faner {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 1.25rem 0;
    border: 1px solid var(--ramme);
    width: max-content;
    max-width: 100%;
}

.faner a {
    padding: .45rem .95rem;
    text-decoration: none;
    color: var(--tekst);
    font-size: .9rem;
    border-right: 1px solid var(--ramme);
}

.faner a:last-child { border-right: 0; }
.faner a:hover { background: rgba(29, 31, 32, .07); }
.faner a.valgt { background: var(--mjf); color: #fff; }

.filter {
    background: transparent;
    border: 1px solid var(--ramme);
    border-radius: 0;
    padding: 1rem;
    margin: 1.25rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    align-items: flex-end;
}

.filter label {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 400;
    color: var(--dempet);
}

.filter select,
.filter input[type="search"],
.filter input[type="text"] {
    padding: .4rem .55rem;
    border: 1px solid var(--ramme);
    border-radius: 0;
    background: var(--felt);
    font-size: .95rem;
    font-family: inherit;
    min-width: 150px;
}

.filter button {
    padding: .45rem 1rem;
    border: 1px solid var(--mjf);
    border-radius: 0;
    background: var(--mjf);
    color: #fff;
    font-family: var(--overskrift);
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
}

.filter button:hover { background: var(--mjf-mork); border-color: var(--mjf-mork); }
.filter .nullstill { font-size: .85rem; align-self: center; }

/* --------------------------------------------------------------------------
   Objektliste
   -------------------------------------------------------------------------- */

.objektliste {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.objektkort {
    background: transparent;
    border: 1px solid var(--ramme);
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.objektkort.haster { border-color: var(--varsel); }

/* 4:3, ikke 16:9.
   16:9 er et videoformat. Et mobilkamera gir 4:3, så med 16:9 ble en fjerdedel av
   hvert eneste bilde skåret bort før noe annet skjedde — og en stående bokforside
   mistet nesten alt. 4:3 er formatet bildene faktisk kommer i. */
.objektkort-bilde {
    display: block;
    aspect-ratio: 4 / 3;
    background: #e4e4e6;
    overflow: hidden;
    border-bottom: 1px solid var(--ramme);
}

.objektkort-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* STÅENDE BILDE: hele bildet, med matting.
   cover ville skåret bort topp og bunn — der en bok har tittelen og en eske har
   endelappen. contain viser alt, og kortet beholder samme høyde som de andre i
   rutenettet, så rada står stille. Bakgrunnen over blir mattingen.
   Klassen settes av er_staaende() i includes/bilde.php; CSS kan ikke vite hvilken
   vei et bilde står. */
.objektkort-bilde.staaende img,
.radliste-bilde.staaende img { object-fit: contain; }

.objektkort-bilde.tomt {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dempet);
    font-size: .85rem;
}

.objektkort-tekst {
    padding: .8rem .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1;
}

.objektkort h2,
.objektkort h3 {
    margin: 0;
    font-family: var(--overskrift);
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--tittel);
}

.objektkort a { color: var(--tittel); text-decoration: none; }
.objektkort a:hover { color: var(--mjf); }
.objektkort p { margin: 0; }

.pris { font-family: var(--overskrift); font-size: 1.35rem; }
.pris strong { font-weight: 600; color: var(--tittel); }
.pris .dempet { font-family: var(--brodtekst); font-size: .78rem; }

.kortbunn {
    margin-top: auto;
    padding-top: .5rem;
    font-size: .8rem;
    color: var(--dempet);
}

/* --------------------------------------------------------------------------
   Merker og kategorier
   -------------------------------------------------------------------------- */

.merke {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 0;
    font-size: .72rem;
    letter-spacing: .02em;
    font-weight: 400;
    white-space: nowrap;
}

.merke.medlem      { background: var(--mjf-100); color: var(--mjf-mork); }
.merke.ikke-medlem { background: #ebebed;        color: var(--dempet); }
.merke.auksjon     { background: var(--mjf-100); color: var(--mjf-mork); }
.merke.fastpris    { background: transparent;    color: var(--mjf-mork); border: 1px solid var(--mjf); }
.merke.solgt       { background: #ebebed;        color: var(--tekst); }
.merke.skyldig     { background: var(--feil-bg); color: var(--feil-kant); }
/* Sperret konto. Egen klasse framfor gjenbruk av .skyldig, som betyr «har et
   ubetalt gebyrkrav» — to helt ulike tilstander skal ikke se like ut i en
   tabell noen skal ta en beslutning ut fra. */
.merke.sperret     { background: var(--feil-bg); color: var(--feil-kant); font-weight: 600; }

/* Parti (lott) — skal fange blikket, derfor oker. */
.merke.parti { background: var(--varsel); color: var(--varsel-tekst); font-weight: 600; }

/* Ubesvart spørsmål. Oker og ikke grått, av samme grunn som .parti: dette er
   det ENESTE merket i «Objekter jeg selger» som ber selgeren gjøre noe, og et
   grått merke i en rad full av grå småtekst blir ikke sett.

   Er merket en lenke (raden i lista lenker til #sporsmal på objektsiden),
   arver det ikke lenkefargen — et merke som skifter farve fordi det tilfeldigvis
   er klikkbart ville ikke lenger vært det samme merket som på objektsiden. */
.merke.ubesvart {
    background: var(--varsel);
    color: var(--varsel-tekst);
    font-weight: 600;
}

a.merke.ubesvart            { text-decoration: none; }
a.merke.ubesvart:hover,
a.merke.ubesvart:focus      { background: var(--varsel-tekst); color: #fff; }

.kategorier { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }

.kategori {
    display: inline-block;
    padding: .12rem .55rem;
    border: 1px solid var(--mjf);
    border-radius: 0;
    background: transparent;
    font-size: .78rem;
    color: var(--mjf-mork);
    text-decoration: none;
}

.kategori:hover { background: var(--mjf-100); }

/* --------------------------------------------------------------------------
   Nedtelling — samme oker-merke overalt
   -------------------------------------------------------------------------- */

.nedtelling {
    display: inline-block;
    background: var(--varsel);
    color: var(--varsel-tekst);
    padding: .05rem .45rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: .85em;
}

.nedtelling.haster { background: var(--varsel); color: var(--varsel-tekst); }
.nedtelling.utlopt { background: #ebebed; color: var(--dempet); font-weight: 400; }

/* --------------------------------------------------------------------------
   Objektside
   -------------------------------------------------------------------------- */

.objekt-topp {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    align-items: start;
    margin-top: 1.5rem;
}

@media (max-width: 860px) {
    .objekt-topp { grid-template-columns: 1fr; }
}

.galleri {
    background: transparent;
    border: 1px solid var(--ramme);
    border-radius: 0;
    box-shadow: none;
}

.galleri-stort img { width: 100%; height: auto; display: block; background: #e4e4e6; }

.galleri-tomt {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dempet);
    background: #e4e4e6;
}

.galleri-rad {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .6rem;
    border-top: 1px solid var(--ramme);
}

.galleri-rad a { line-height: 0; }

.galleri-rad img {
    width: 74px;
    height: 56px;
    object-fit: cover;
    border: 1px solid var(--ramme);
    border-radius: 0;
    display: block;
}

.galleri-rad a:hover img { border-color: var(--mjf); }

/* --------------------------------------------------------------------------
   Forstørret bildevisning — bildeviser.js

   Overlegget bygges av skriptet, så alt under .bildeviser er dødt uten
   JavaScript. Merket «Klikk for å forstørre» henger på klassen
   .galleri-kan-forstorres, som skriptet setter selv — nettopp for at sida
   ikke skal love en forstørrelse den ikke kan levere.
   -------------------------------------------------------------------------- */

/* display: block uavhengig av skriptet: en inline <a> rundt bildet gir en
   linjeboks med plass til underlengder, altså noen piksler luft under
   bildet — også på en side uten JavaScript. */
.galleri-stort .galleri-forstorr { display: block; }
.galleri-kan-forstorres .galleri-stort { position: relative; }
.galleri-kan-forstorres .galleri-forstorr { cursor: zoom-in; }

.galleri-kan-forstorres .galleri-stort::after {
    content: "Klikk for å forstørre";
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    padding: .18rem .5rem;
    font-family: var(--overskrift);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(29, 31, 32, .72);
    pointer-events: none;
}

/* Hvilken miniatyr som vises stort nå. Uten merket er raden bare seks like
   ruter, og med JavaScript på (der klikket ikke laster sida) mister man
   oversikten over hvor i rekka man er. */
.galleri-rad a[aria-current="true"] img {
    border-color: var(--mjf);
    outline: 2px solid var(--mjf);
    outline-offset: -2px;
}

.bildeviser {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(12, 13, 14, .95);
}

.bildeviser[hidden] { display: none; }

/* Sida bak skal ikke kunne rulles mens overlegget står åpent. */
body.bildeviser-aapen { overflow: hidden; }

.bildeviser-flate {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 3.4rem 1rem 2.6rem;

    /* Uten denne ruller nettleseren sida i stedet for å gi skriptet
       fingerbevegelsene til knip og sveip. */
    touch-action: none;
}

.bildeviser-bilde {
    display: block;
    max-width: 100%;
    max-height: 100%;
    transform-origin: center center;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-select: none;
}

.bildeviser.zoomet .bildeviser-bilde { cursor: grab; }
.bildeviser.laster .bildeviser-bilde { visibility: hidden; }

.bildeviser-topp {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .7rem;

    /* Stripa dekker toppen av flata. Uten dette ville et klikk i tomrommet
       mellom telleren og lukkeknappen treffe stripa og ikke gjøre noe, der
       brukeren forventer at klikk utenfor bildet lukker. */
    pointer-events: none;
}

.bildeviser-topp > * { pointer-events: auto; }

.bildeviser-teller {
    font-family: var(--overskrift);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .78);
}

.bildeviser-knapp {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: var(--overskrift);
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 0;
    cursor: pointer;
}

.bildeviser-knapp:hover { background: rgba(255, 255, 255, .2); }
.bildeviser-knapp:focus-visible { outline: 2px solid var(--varsel); outline-offset: 2px; }
.bildeviser-knapp[hidden] { display: none; }

.bildeviser-lukk { width: 2.4rem; height: 2.4rem; font-size: 1.7rem; }

.bildeviser-pil {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.6rem;
    height: 3.6rem;
    font-size: 2rem;
}

.bildeviser-forrige { left: .5rem; }
.bildeviser-neste { right: .5rem; }

.bildeviser-melding,
.bildeviser-hjelp {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, .72);
    pointer-events: none;
}

.bildeviser-melding { top: 50%; transform: translateY(-50%); }
.bildeviser-melding[hidden] { display: none; }
.bildeviser-hjelp { bottom: .7rem; font-size: .8rem; }

/* Hjelpelinja nevner mus og Esc, som en telefon ikke har. Knipe og sveipe er
   dessuten noe folk gjør uten å bli bedt om det. */
@media (max-width: 600px) {
    .bildeviser-hjelp { display: none; }
    .bildeviser-flate { padding: 3.2rem .3rem 1rem; }
    .bildeviser-pil { width: 2.2rem; height: 3rem; font-size: 1.7rem; }
}

.prisboks {
    background: transparent;
    border: 1px solid var(--ramme);
    border-radius: 0;
    box-shadow: none;
    padding: 1.2rem;
}

.prisboks p { margin: .45rem 0; }

.stor-pris {
    font-family: var(--overskrift);
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--tittel);
    margin: 0 !important;
}

.status-linje { margin-top: 1rem !important; padding-top: .9rem; border-top: 1px solid var(--ramme); }

.beskrivelse {
    background: transparent;
    border: 1px solid var(--ramme);
    border-radius: 0;
    padding: 1.1rem 1.2rem;
    margin: 2rem 0;
    max-width: 70ch;
}

/* --------------------------------------------------------------------------
   Skjema
   -------------------------------------------------------------------------- */

.skjema {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 420px;
    margin: 1.5rem 0;
}

.skjema.bred-skjema { max-width: 640px; }

.skjema label {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 400;
    color: var(--dempet);
}

/* Typene ramses opp én for én framfor `.skjema input`, slik at avkryssings-
   bokser og radioknapper slipper unna. Lista MÅ utvides når et nytt felt tas i
   bruk: en type som ikke står her, arver nettleserens egen hvite bakgrunn og
   skiller seg ut som et hull i skjemaet. Det var nettopp det som skjedde med
   `type="url"` da lenkefeltet kom til på nytt-objekt.php. */
.skjema input[type="text"],
.skjema input[type="email"],
.skjema input[type="password"],
.skjema input[type="search"],
.skjema input[type="url"],
.skjema input[type="tel"],
.skjema input[type="number"],
.skjema input[type="date"],
.skjema input[type="datetime-local"],
.skjema input[type="file"],
.skjema select,
.skjema textarea {
    padding: .5rem .6rem;
    border: 1px solid var(--ramme);
    border-radius: 0;
    font-size: 1rem;
    font-family: inherit;
    color: var(--tekst);
    background: var(--felt);
    width: 100%;
}

.skjema textarea { resize: vertical; min-height: 6rem; }

.skjema input:hover,
.skjema select:hover,
.skjema textarea:hover { border-color: rgba(29, 31, 32, .45); }

/* GULT FELT I FOKUS.
   -------------------------------------------------------------------------
   Petrol var fargen før, men den er også fargen på menyen, lenkene og
   hovedknappen — en petrol ramme rundt ett felt forsvant i alt det andre.
   Okergult brukes ellers bare til å be om oppmerksomhet (testbanneret,
   frister, partimerket), og et felt som venter på deg er akkurat det.

   Både bakgrunn og ramme byttes. Rammen alene er to piksler i utkanten av
   synsfeltet; flaten er det man ser uten å lete etter den. --advarsel-kant er
   den mørke okeren, valgt framfor --varsel fordi en ramme må ha nok kontrast
   mot den lyse flaten til å telle som en synlig fokusmarkering. */
.skjema input:focus-visible,
.skjema select:focus-visible,
.skjema textarea:focus-visible {
    outline: 2px solid var(--advarsel-kant);
    outline-offset: 0;
    border-color: var(--advarsel-kant);
    background: var(--varsel-100);
}

/* Påkrevde felt.
   -------------------------------------------------------------------------
   En strek i oker langs venstrekanten, ikke en stjerne etter etiketten. Streken
   står der uansett om feltet er fylt ut, og den leses som «denne må du innom»
   framfor «her er det noe galt» — som en rød markering ville gjort.

   Klassen settes for hånd på de feltene som har `required`. Den er altså ikke
   automatisk: står `required` på feltet uten `viktig` på etiketten, mangler
   streken. Det er en bevisst pris for å slippe :has(), som ville knyttet
   utseendet til en selektor eldre nettlesere ikke kjenner. */
.skjema label.viktig { color: var(--tekst); }

.skjema label.viktig > input,
.skjema label.viktig > select,
.skjema label.viktig > textarea {
    border-left: 3px solid var(--varsel);
    padding-left: calc(.6rem - 2px);
}

/* BREDT SKJEMA MED HJELPETEKST VED SIDEN AV.
   -------------------------------------------------------------------------
   `.skjema` er 420 px bred med vilje: et skjema man fyller ut ovenfra og ned
   leses best i én smal kolonne, og et tekstfelt på 1100 px er verken pent
   eller lettere å bruke.

   Men to sider er ikke slik. profil.php og admin-innstillinger.php er
   INNSTILLINGSSIDER: lange lister der hvert felt har en forklaring, og der
   forklaringen er halve poenget. I én smal kolonne blir de en rull på flere
   skjermhøyder, med hjelpeteksten skjøvet vekk fra feltet den gjelder.

   `.skjemarad` setter felt og forklaring ved siden av hverandre, én rad per
   innstilling. Feltkolonnen beholder omtrent samme bredde som før — det er
   fortsatt et skjema — mens forklaringen får plassen som ellers sto tom.

   Streken over hver rad er det som gjør lista lesbar: uten den flyter tjue
   innstillinger sammen til én grå flate. */
.skjema.skjema-bredt { max-width: 100%; gap: 0; }

.skjemarad {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: .5rem 2.5rem;
    align-items: start;
    padding: 1.15rem 0;
    border-top: 1px solid var(--ramme);
}

.skjemarad:first-of-type { border-top: 0; }

/* Feltkolonnen kan inneholde flere felt — navn, telefon og postnummer hører
   sammen som én rad med én forklaring. */
.skjemarad-felt {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.skjemarad-hjelp > :first-child { margin-top: 0; }
.skjemarad-hjelp > :last-child  { margin-bottom: 0; }
.skjemarad-hjelp .hjelpetekst   { margin: 0 0 .6rem; }

/* Rader som ikke skal deles: en avkryssingsliste med tjue produsenter har
   ingenting å tjene på en 22 rem bred kolonne. */
.skjemarad.bred { grid-template-columns: minmax(0, 1fr); }

/* `gap: 0` på skjemaet gjør at radene får stå tett inntil strekene sine. Da
   trenger knappen sin egen luft, og den skal ikke strekkes over hele bredden
   slik en flex-strekk ellers ville gjort. */
.skjema.skjema-bredt > button {
    margin-top: 1.75rem;
    align-self: start;
}

/* Under 860 px er det ikke plass til to kolonner — da faller forklaringen ned
   under feltet, som er der den sto før. Samme knekkpunkt som resten av sida. */
@media (max-width: 860px) {
    .skjemarad { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
}

.feltpar { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.felttrio { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }

@media (max-width: 700px) { .felttrio { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feltpar, .felttrio { grid-template-columns: 1fr; } }

.skjema .smalt-felt { flex: 0 0 8rem; }
.skjema .smalt-felt input { max-width: 8rem; }

/* Knapper i et skjema — OG knapper som peker til et delt skjema med form="…".
   -------------------------------------------------------------------------
   `.skjema button` var lenge den eneste selektoren som ga knappene i dette
   prosjektet et utseende. En knapp inne i en `.radhandling`, altså utenfor
   <form>-elementet den hører til, traff den ikke — og fikk nettleserens
   standardknapp i stedet.

   Det gjaldt allerede knappene i admin-kategorier.php, som har pekt til delte
   skjemaer siden kategoritabellen ble strammet inn. Selektorlista under retter
   begge steder samtidig, framfor å gjenta erklæringene et sted til. */

.skjema button,
.radhandling button,
.radstatus button {
    padding: .55rem 1.3rem;
    border: 1px solid var(--mjf);
    border-radius: 0;
    background: var(--mjf);
    color: #fff;
    font-family: var(--overskrift);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
}

.skjema button:hover,
.radhandling button:hover,
.radstatus button:hover { background: var(--mjf-mork); border-color: var(--mjf-mork); }

.skjema button:active,
.radhandling button:active,
.radstatus button:active { background: var(--mjf-hover); }

.skjema button.sekundaer,
.radhandling button.sekundaer,
.radstatus button.sekundaer {
    background: transparent;
    color: var(--tekst);
    border: 1px solid var(--ramme);
    font-weight: 600;
}

.skjema button.sekundaer:hover,
.radhandling button.sekundaer:hover,
.radstatus button.sekundaer:hover { background: rgba(29, 31, 32, .07); border-color: var(--ramme); }

.skjema label.avkryss {
    flex-direction: row;
    align-items: flex-start;
    gap: .5rem;
    font-size: .95rem;
    color: var(--tekst);
}

.skjema label.avkryss input[type="checkbox"] {
    width: auto;
    margin: .35rem 0 0;
    flex: none;
    accent-color: var(--mjf);
}

/* Mange avkryssingsbokser side ved side — produsentlista i varslingsfilteret
   på profil.php. Egen klasse framfor å style avkryss-labelen direkte: den skal
   fortsatt stables loddrett når den brukes alene, som ellers i skjemaet. */
.avkryssgrid {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    margin: .4rem 0 1rem;
}
.avkryssgrid label.avkryss { flex: 0 1 auto; margin: 0; }

/* Valg av salgstype */

.valgkort {
    display: grid;
    gap: 1.5rem;
    margin: 1.5rem 0;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.valg {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.2rem;
    background: transparent;
    border: 1px solid var(--ramme);
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
    color: var(--tekst);
}

.valg:hover { border-color: var(--mjf); background: rgba(33, 117, 155, .05); }
.valg strong { font-family: var(--overskrift); font-size: 1.3rem; font-weight: 600; color: var(--tittel); }
.valg span { color: var(--dempet); font-size: .9rem; }

/* ⚠️ DENNE SEKSJONEN MÅ LIGGE ETTER «Skjema», IKKE FØR.

   Den sto først over skjemaseksjonen, og da hadde den ingen virkning i det hele
   tatt. `.sporsmal-skjema` og `.skjema` har nøyaktig samme spesifisitet (én
   klasse hver), så det er REKKEFØLGEN som avgjør — og `.skjema { display: flex;
   max-width: 420px }` lenger nede vant over `display: grid` her. Rutenettet ble
   aldri til et rutenett.

   Flyttes noe av dette tilbake opp, forsvinner tokolonnersoppsettet stille
   igjen. Ingen feilmelding, ingenting i konsollen — bare et skjema som ser ut
   som før.

   Reglene med `.sporsmal-par .skjema` var upåvirket: to klasser slår én,
   uansett rekkefølge. Det er derfor bare NOEN av skjemaene så feil ut. */

/* --------------------------------------------------------------------------
   Spørsmål og svar (oppsett-44.sql)
   -------------------------------------------------------------------------- */

.objekt-sporsmal { margin: 2.5rem 0; }

/* Ett par = ett spørsmål med sitt svar. Venstrekanten er det som skiller dem
   fra hverandre — uten den flyter tre spørsmål sammen til én tekstblokk, og
   leseren mister hvor det ene slutter og det neste begynner. */
.sporsmal-par {
    border-left: 3px solid var(--ramme);
    padding: .1rem 0 .1rem 1rem;
    margin: 1.4rem 0;
}

/* ⚠️ LESEBREDDEN LIGGER PÅ TEKSTEN, IKKE PÅ BEHOLDEREN.

   `.sporsmal-par` hadde `max-width: 70ch`, som er riktig mål for en linje med
   løpende tekst — men det klemte også skjemaene inne i tråden, og da er det
   ingen plass å legge forklaringen ved siden av.

   Nå styrer avsnittene sin egen bredde, og beholderen får være så bred som
   spalten. Skjemaene under bruker den plassen; tekstavsnittene gjør det ikke. */
.sporsmal-tekst,
.svar-tekst { max-width: 70ch; }

/* Ubesvart skal SES i selgerens kø. Fargen er den samme som varselrammen
   ellers på nettstedet, ikke en ny. */
.sporsmal-par.venter { border-left-color: var(--advarsel-kant); }

/* Avvist og skjult er ferdigbehandlet. De skal kunne leses, men ikke dra
   blikket til seg — de er historikk, ikke en oppgave. */
.sporsmal-par.behandlet { border-left-color: var(--ramme-svak); }

.sporsmal-tekst,
.svar-tekst { margin: .4rem 0; }

/* Svaret rykkes inn under spørsmålet. Uten det leses de to som to sidestilte
   avsnitt, og trådformen forsvinner. */
.svar-tekst { padding-left: 1rem; }

/* Skjemaene inne i en tråd hører til tråden, ikke til sida. Uten dette får de
   .skjema sin margin på 1.5rem og løsner fra spørsmålet de svarer på. */
.sporsmal-par .skjema {
    margin: .8rem 0 0;
    max-width: 100%;
}

/* To kolonner: felt til venstre, forklaring til høyre.

   Forklaringen er ikke pynt — «dette blir offentlig for alle» er den ene
   opplysningen både spørreren og selgeren må ha før de trykker, og den kan
   ikke kortes ned til en setning. Under feltet kostet den fire linjer høyde
   per skjema, og med tre ubesvarte spørsmål i en kø ble det en skjermhøyde med
   samme tekst tre ganger. Ved siden av koster den ingenting.

   Feltkolonnen får 1fr og forklaringen et tak: en forklaring som blir bredere
   enn ~30 rem er ikke lettere å lese, bare lengre å skanne. */
.sporsmal-skjema {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    gap: 1rem 2.5rem;
    align-items: start;
    max-width: 100%;
}

/* Skjulte felt (csrf_felt() og handling) har display:none fra nettleseren og
   blir aldri rutenettceller. Derfor kan de stå som direkte barn av skjemaet
   uten å lage tomme kolonner. */
.sporsmal-felt {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    align-items: flex-start;
    min-width: 0;
}

/* Knappen skal ikke strekkes over hele feltkolonnen slik en flex-strekk ellers
   ville gjort — derfor align-items over, og ingen width her. */
.sporsmal-felt textarea { width: 100%; }
.sporsmal-felt label    { width: 100%; }

.sporsmal-hjelp > :first-child { margin-top: 0; }
.sporsmal-hjelp .hjelpetekst   { margin: 0 0 .6rem; }
.sporsmal-hjelp > :last-child  { margin-bottom: 0; }

/* På smal skjerm faller forklaringen tilbake under feltet — der den sto før.
   Høyden er ikke knapp på en mobil på samme måte; det er bredden som er det.

   860 px og ikke et nytt tall: det er bruddpunktet resten av nettstedet bruker
   når to kolonner blir til én. Et eget bruddpunkt her ville gitt et vindu der
   spørsmålsblokka la om og alt annet ikke. */
@media (max-width: 860px) {
    .sporsmal-skjema { grid-template-columns: minmax(0, 1fr); }
}

/* Moderatorens skjul-skjema er ett kort tekstfelt og en knapp. Det skal ikke
   arve `max-width: 100%` fra regelen over og strekke seg over hele spalten.

   Klassen står alene, uten `.sporsmal-par` foran: skjemaet ligger i en
   `.sporsmal-par` både på objekt.php og på admin-sporsmal.php i dag, men taket
   følger skjemaet og ikke stedet det står. */
.skjema.sporsmal-skjul { max-width: 34rem; }

/* Sammenleggeren rundt skjul-skjemaet. `.hjelpedetaljer` gir summary-en sin
   stil; her trengs bare at boksen ikke arver marginen som er laget for en
   hjelpetekst OVER en tabell — og at skjemaet ligger tett under summary-en
   framfor med `.skjema` sin egen luft. */
.sporsmal-par > .hjelpedetaljer { margin: .6rem 0 0; }
.hjelpedetaljer > .skjema.sporsmal-skjul { margin-top: .6rem; }

/* --------------------------------------------------------------------------
   Tabeller
   -------------------------------------------------------------------------- */

.tabellramme { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    background: transparent;
    border: 0;
    font-size: .95rem;
}

th, td { padding: .55rem .6rem; text-align: left; vertical-align: top; }

th {
    background: transparent;
    color: var(--dempet);
    font-family: var(--brodtekst);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 400;
    border-bottom: 1px solid var(--ramme);
}

td { border-bottom: 1px solid var(--ramme-svak); }

tbody tr:hover { background: rgba(29, 31, 32, .04); }
tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }

table td form { margin: 0; }
table td .skjema { margin: 0 0 .35rem; max-width: none; }
/* I en tabellcelle skal knappen være liten. Gjelder både knapper i et skjema
   i cella, og knapper som peker ut av den med form="…". */
table td .skjema button,
table td .radhandling button,
table td .radstatus button { padding: .25rem .65rem; font-size: .85rem; }

/* --------------------------------------------------------------------------
   Tette tabeller — én rad er én linje
   --------------------------------------------------------------------------
   Standardtabellen har luft dimensjonert for lesing. Disse tabellene leses
   ikke, de BRUKES: hver rad er ett objekt med et navn, et tall, noen
   avkryssinger og et par knapper. Med lesevennlig luft ble hver rad så høy at
   ti rader ikke fikk plass på skjermen, og knappene i cellene så ut som egne
   rader.

   .radhandling og .radstatus er de to cellene som stablet innhold loddrett.
   Der knappene peker til delte skjemaer over tabellen med form="…" trengs
   wrapperne likevel: flex på en <td> gjør at cella slutter å oppføre seg som
   en tabellcelle.

   TO NAVN PÅ SAMME SAK. `.kategoritabell` er det historiske navnet, fra den
   gangen kategorisida var den eneste som trengte dette. `.tett-tabell` er det
   navnet nye sider skal bruke — brukerlista i admin-brukere.php er den første.
   Begge peker på samme regler; alternativet var å døpe om klassen i
   admin-kategorier.php også, og det er endring uten gevinst. */

.kategoritabell td,
.tett-tabell td {
    padding: .3rem .5rem;
    /* middle, ikke top: alt i raden er ett høydenivå nå. */
    vertical-align: middle;
}

.kategoritabell th,
.tett-tabell th { padding: .35rem .5rem; }

.kategoritabell .radskjema,
.tett-tabell .radskjema { gap: .4rem; }

.kategoritabell .radskjema input[type="text"] { min-width: 140px; }

/* ⚠️ ET RADSKJEMA I EN TETT TABELL SKAL ALDRI BRYTES.
   -------------------------------------------------------------------------
   `.skjema.radskjema` har `flex-wrap: wrap`, og det er riktig for skjemaene
   over kategoritabellen. I en tabellrad er det galt: brytes skjemaet, blir
   raden to eller tre linjer høy — og da har tabellen sluttet å være tett.
   Nettopp det skjedde i brukerlista, der hver rad ble høyere enn før
   opprydningen i stedet for lavere.

   Er det ikke plass, skal `.tabellramme` rulle vannrett. Vannrett rulling er
   et valg brukeren tar; en rad som vokser nedover er det ikke. */

.tett-tabell .radskjema,
.tett-tabell .radstatus { flex-wrap: nowrap; }

/* Ingen av feltene skal krympe når det blir trangt — de skal beholde bredden
   sin og la tabellen bli bred. Uten dette klemmes et <select> til «Følg re…». */
.tett-tabell .radskjema > *,
.tett-tabell .radstatus > * { flex: 0 0 auto; }

/* `.skjema select` er `width: 100%`, laget for et loddrett skjema. På en linje
   må den være så bred som teksten sin, ellers klippes valget. */
.tett-tabell .radskjema select { width: auto; }

/* Skjemafelt som peker til et delt skjema med form="…"
   -------------------------------------------------------------------------
   Samme historie som knappene: `.skjema input` og `.skjema select` er
   selektorene som gir feltene utseendet sitt, og et felt inne i en
   `.radstatus` ligger utenfor <form>-elementet sitt. Det fikk derfor
   nettleserens standardfelt — og for et <input type="text"> betyr det
   `size="20"`, altså rundt 175 px uansett hvor lite som skal stå i det.

   Det var HELE grunnen til at brukertabellen ble for bred. Ikke luften mellom
   kolonnene, ikke antall kolonner: to felt som tok 350 px til å vise ett siffer.

   Merk at bredden IKKE settes til 100% her, i motsetning til inne i
   `.skjema`: disse feltene står på en linje, og skal være så brede som
   innholdet krever. */

.radstatus input[type="text"],
.radstatus select,
.radhandling input[type="text"],
.radhandling select {
    padding: .5rem .6rem;
    border: 1px solid var(--ramme);
    border-radius: 0;
    font-size: 1rem;
    font-family: inherit;
    color: var(--tekst);
    background: var(--felt);
    width: auto;
}

.radstatus input[type="text"]:hover,
.radstatus select:hover,
.radhandling input[type="text"]:hover,
.radhandling select:hover { border-color: rgba(29, 31, 32, .45); }

.radstatus input:focus-visible,
.radstatus select:focus-visible,
.radhandling input:focus-visible,
.radhandling select:focus-visible {
    outline: 2px solid var(--mjf);
    outline-offset: 0;
    border-color: var(--mjf);
}

/* I en tett tabell er feltene små, som knappene ved siden av dem. */
.tett-tabell .radstatus input[type="text"],
.tett-tabell .radstatus select,
.tett-tabell .radhandling input[type="text"],
.tett-tabell .radhandling select,
.tett-tabell .radskjema input[type="text"],
.tett-tabell .radskjema select { padding: .25rem .45rem; font-size: .9rem; }

/* Tallfeltene inneholder 0–3 sifre. `size` betyr ingenting når width er satt.
   Selektorene har tre klasser for å komme foran regelen over, som har like
   høy spesifisitet — rekkefølgen alene er for skjør å hvile på. */
.tett-tabell .radstatus input.smalt,
.tett-tabell .radhandling input.smalt,
.tett-tabell .radskjema input.smalt {
    width: 3rem;
    min-width: 0;
    text-align: right;
}

/* Bredder for medlemsregisterets redigerbare tekstfelt (admin-medlemmer.php).
   Navngitt etter INNHOLDET, ikke etter en tallverdi som blir feil den dagen
   feltet flyttes til en annen tabell — samme resonnement som `.smalt`. */
.tett-tabell .radstatus input.felt-navn  { width: 6.5rem; min-width: 0; }
.tett-tabell .radstatus input.felt-epost { width: 11rem;  min-width: 0; }
.tett-tabell .radstatus input.felt-mobil { width: 6.5rem; min-width: 0; }

/* E-postadressen er den bredeste kolonnen, og den eneste som kan klippes uten
   tap: hele adressen står i `title`. */
.tett-tabell .klipp {
    display: inline-block;
    /* 13 rem tar de fleste adressene helt ut. Resten klippes med ellipse, og
       står uforkortet i `title`. Kolonnen er den bredeste i tabellen, så hver
       rem her er en rem tabellen slipper å rulle. */
    max-width: 13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.radhandling,
.radstatus {
    display: flex;
    align-items: center;
    gap: .4rem;
    /* Knapper og merker skal aldri brytes over to linjer — det var hele feilen. */
    white-space: nowrap;
}

.radstatus { gap: .5rem; }

/* Radene skiller seg fra hverandre med linja, ikke med luft. Da tåler tabellen
   å være tett uten at det blir uklart hvor en rad slutter. */
.kategoritabell tbody td,
.tett-tabell tbody td { border-bottom: 1px solid var(--ramme); }

/* Sorterbar kolonneoverskrift.
   -------------------------------------------------------------------------
   Overskrifta ER lenka — ikke en tekst med en liten pil ved siden av. Et
   klikkmål på to tegn er den slags detalj som gjør en tabell irriterende å
   bruke uten at noen klarer å si hvorfor.

   Pila står bare på den aktive kolonnen. En pil på alle seks ville sagt
   «sorterbar», men det er lenkeutseendet som sier det — pila skal svare på
   «hvordan er lista sortert NÅ». */

th .sorterbar {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    /* Pila skal aldri havne på egen linje under teksten. */
    white-space: nowrap;
}

th .sorterbar:hover { text-decoration: underline; }

th .sorterbar.valgt { color: var(--mjf-mork); }

/* Sammenleggbar hjelpetekst over en tabell.
   -------------------------------------------------------------------------
   Forklaringene til brukerlista var tre avsnitt, og til sammen høyere enn
   lista de forklarte. De trengs første gang og aldri mer, og hører derfor bak
   en summary — ikke øverst på sida for alltid. */

.hjelpedetaljer {
    margin: 0 0 1rem;
    font-size: .95rem;
}

.hjelpedetaljer > summary {
    cursor: pointer;
    color: var(--mjf);
    font-family: var(--overskrift);
    font-weight: 600;
    font-size: .9rem;
}

.hjelpedetaljer > summary:hover { color: var(--mjf-hover); }

/* Første avsnitt trenger luft fra summary først når boksen er åpen. */
.hjelpedetaljer[open] > summary { margin-bottom: .5rem; }
.hjelpedetaljer .hjelpetekst:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Admin
   -------------------------------------------------------------------------- */

.admin-seksjon {
    background: transparent;
    border: 1px solid var(--ramme);
    border-radius: 0;
    box-shadow: none;
    padding: 1.2rem;
    margin: 2rem 0;
}

.admin-seksjon h2 { margin-top: 0; }

.engangspassord {
    display: inline-block;
    padding: .4rem .8rem;
    background: var(--varsel-100);
    border: 1px solid var(--varsel);
    border-radius: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 1.15rem;
    letter-spacing: .06em;
}

.skjema.radskjema {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0;
}

.skjema.radskjema input[type="text"] { width: auto; min-width: 170px; }
.skjema.radskjema input.smalt { width: 4.5rem; min-width: 0; text-align: right; }
.skjema.radskjema code { white-space: nowrap; }

/* Avkryssing på en radskjema-linje. Grunnvarianten er laget for et loddrett
   skjema — boksen står på toppen av en tekst som kan gå over flere linjer — men
   på en linje der alt annet er sentrert blir den da liggende for høyt. */
.skjema.radskjema label.avkryss { align-items: center; white-space: nowrap; }
.skjema.radskjema label.avkryss input[type="checkbox"] { margin: 0; }

/* Veiviseren: knappen som leser bildene som alt er valgt.

   Var en <details> med sin egen filvelger over skjemaet. Den står nå inne i
   bildeblokka øverst i skjemaet — se «VEIVISEREN: ET VALG PÅ BILDENE SOM ALT
   ER VALGT» i nytt-objekt.php.

   Boksen er med videre, og den gjør en jobb: uten den flyter knappen sammen
   med filvelgeren rett over, og det er nettopp skillet mellom «her laster du
   opp» og «her kan du få hjelp» som testerne ikke fikk tak i. */

.veiviservalg {
    background: var(--mjf-100);
    border: 1px solid var(--mjf-200);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0 0;
}

.veiviservalg-tittel {
    font-family: var(--overskrift);
    font-weight: 600;
    color: var(--mjf-mork);
    margin: 0 0 .7rem;
}

/* Knappen er .sekundaer og arver align-self: flex-start fra .skjema button.
   Luft under den, ellers klistrer personvernlinja seg til underkanten. */
.veiviservalg button { margin-bottom: .8rem; }

.veiviservalg p { margin: 0 0 .75rem; }
.veiviservalg p:last-child { margin-bottom: 0; }

/* Merket på et felt veiviseren ikke var trygg på.
   MERK: teksten «kontroller» bærer beskjeden, ikke fargen. Et merke som bare er
   gult er usynlig for den som ikke ser gult, og dette er nettopp opplysningen
   selgeren står juridisk ansvarlig for å kontrollere. */
.usikkermerke {
    display: inline-block;
    background: var(--varsel-100);
    color: var(--varsel-tekst);
    border: 1px solid var(--varsel);
    border-radius: 3px;
    padding: 0 .4rem;
    margin-left: .4rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Bildevelgeren: miniatyrer med rekkefølge
   --------------------------------------------------------------------------
   Brukes tre steder, med samme utseende og samme betydning:
     * filer valgt i nettleseren, før opplasting  (bildevelger.js)
     * veiviserens bilder, som venter på et objekt (nytt-objekt.php)
     * bildene på et objekt som alt finnes         (objekt.php)

   Kortene har fast bredde og et 1:1 bilderom med object-fit: cover, slik at et
   stående og et liggende bilde er like store i rekka. Uten det hopper radhøyden
   for hvert portrettbilde, og «lengst til venstre» blir vanskelig å lese. */

.valgtebilder {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: .5rem 0 1rem;
}

.valgtbilde {
    width: 116px;
    border: 1px solid var(--ramme);
    background: var(--flate);
    padding: 4px;
    display: grid;
    /* To piler side om side på nederste rad, bildet og merket over. */
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}

/* Hovedbildet framheves med ramme OG med teksten «Hovedbilde» i merket.
   Rammen alene ville vært et fargesignal, og det er nettopp den opplysningen
   selgeren trenger å lese. */
.valgtbilde.hovedbilde {
    border-color: var(--mjf);
    box-shadow: inset 0 0 0 1px var(--mjf);
}

.valgtbilde img,
.valgtbilde-tom {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--felt);
}

/* Vises når fila er for stor å lese i nettleseren. Se MAKS_LESES i
   bildevelger.js — kortet skal finnes uansett, ellers kan bildet ikke flyttes. */
.valgtbilde-tom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .35rem;
    font-size: .68rem;
    line-height: 1.25;
    color: var(--dempet);
    text-align: center;
    overflow: hidden;
    word-break: break-all;
}

.valgtbilde-merke {
    grid-column: 1 / -1;
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
    color: var(--dempet);
    padding: .15rem 0;
}

.valgtbilde.hovedbilde .valgtbilde-merke { color: var(--mjf-mork); }

.valgtbilde-pil,
.valgtbilde-slett {
    font: inherit;
    font-size: .8rem;
    line-height: 1;
    padding: .3rem 0;
    background: var(--felt);
    color: var(--tekst);
    border: 1px solid var(--ramme);
    cursor: pointer;
}

.valgtbilde-pil:hover:not(:disabled),
.valgtbilde-slett:hover { background: var(--mjf-100); border-color: var(--mjf-200); }

.valgtbilde-pil:disabled { opacity: .35; cursor: default; }

.valgtbilde-slett {
    grid-column: 1 / -1;
    font-size: .7rem;
}

/* Miniatyren i tabellen på Mine sider.
   HTML-en satte width="60" height="47". To faste tall STREKKER bildet, så en
   stående bokforside ble klemt sammen — verre enn beskjæring, for da ser
   gjenstanden feil ut. Kvadratisk boks med contain viser hele bildet i riktig
   forhold, og alle radene får samme høyde. */
.minibilde {
    width: 60px;
    height: 60px;
    object-fit: contain;
    float: left;
    margin: 0 .6rem .3rem 0;
    border: 1px solid var(--ramme);
    border-radius: 0;
    object-fit: cover;
}

.epostvisning {
    background: var(--felt);
    border: 1px solid var(--ramme);
    border-radius: 0;
    padding: .8rem 1rem;
    margin: .5rem 0 0;
    font-size: .85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-x: auto;
}

code {
    background: var(--felt);
    padding: .1rem .35rem;
    border-radius: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .9em;
}

/* --------------------------------------------------------------------------
   Mobil
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    main { padding: 1.5rem 1rem 3rem; }
    .objektliste { grid-template-columns: 1fr; gap: 1.75rem; }
    .filter { flex-direction: column; align-items: stretch; }
    .filter label, .filter select, .filter input { width: 100%; min-width: 0; }
    .faner { width: 100%; }
    .faner a { flex: 1; text-align: center; }
    .stor-pris { font-size: 2.1rem; }
}

/* ==========================================================================
   TILLEGG UNDER IMPLEMENTASJONEN — august 2026
   ==========================================================================

   Klassene over kom med redesignpakka. Alt under er skrevet etterpå, for
   markup som handoveren beskrev men som ikke fantes CSS for ennå. Holdt
   samlet her, slik at en ny leveranse av stil.css fra designeren kan limes
   inn over alt over denne linja uten å miste noe.

   Følger samme formspråk: firkantede hjørner, hårfine rammer, ingen skygger.
   ========================================================================== */

/* Logomerket når det inneholder et bilde framfor teksten «MJF».
   line-height: 0 fjerner mellomrommet under et inline-bilde, som ellers ville
   dyttet merket ut av linje med teksten ved siden av.

   Ingen hvit plate bak: fila er en gjennomsiktig strektegning i nesten svart,
   og filteret under farger strekene hvite. brightness(0) gjør først alt svart
   uten å røre alfakanalen, invert(1) snur det svarte til hvitt — de
   gjennomsiktige feltene mellom hjulspilene forblir gjennomsiktige.
   Resultatet er et merke i samme hvitt som menyteksten, rett på den
   petrolfargede flaten.

   Filteret framfor å farge SVG-en hvit i selve fila: da er logofila fortsatt
   brukbar mot lys bakgrunn andre steder. Brukes fargelogoen her igjen en dag,
   må filteret fjernes — det ville gjort den helhvit. */
.logo-merke { line-height: 0; }
.logo-merke img {
    display: block;
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   Hero på forsiden
   --------------------------------------------------------------------------
   Ligger inne i <main>, men bryter ut til full bredde med negative marger.
   Alternativet var å endre signaturen til sidehode(), som femten sider bruker.

   `50vw - 50%` er halve vindusbredden minus halve elementbredden — altså
   avstanden ut til kanten. Paddingen legger like mye tilbake, så innholdet
   står på linje med resten av siden. `overflow-x: clip` på body hindrer at
   rullefeltets bredde gir et vannrett rullefelt; `clip` framfor `hidden`
   fordi hidden lager en rullekontainer som ville brutt eventuell
   position: sticky senere. */

body { overflow-x: clip; }

/* HEROEN TRENGER SIN EGEN TOPPMARG BARE NÅR DEN ER FØRST.
 *
 * -2rem over opphever toppmargen <main> gir, slik at den mørke flaten begynner
 * rett under menyen. Det forutsetter at heroen ER det første elementet — og det
 * er den ikke alltid:
 *
 *   * varselet om at passordet må byttes, som sidehode() skriver ut inne i
 *     <main> på hver side til det er gjort
 *   * kvitteringen etter at en bruker avsluttet kontoen sin (index.php)
 *
 * I begge tilfellene trakk heroen seg opp OVER meldingen og skar den i to.
 * Meldingen sto der, men halve teksten lå under den mørke flaten.
 *
 * :not(:first-child) framfor en regel per melding: enhver ting som havner over
 * heroen skal virke, også den neste noen legger til. */
.hero:not(:first-child) { margin-top: 0; }

.hero {
    margin: -2rem calc(50% - 50vw) 2.5rem;
    padding: 3rem max(1.25rem, calc(50vw - 50% + 1.25rem));
    background: var(--mjf-mork);
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.hero-kicker {
    margin: 0 0 .5rem;
    font-size: .69rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #a8cfe0;
}

.hero h1 { font-size: 3.25rem; margin: 0 0 .85rem; color: #fff; }

.hero-ingress {
    font-size: 1.06rem;
    color: #dbeaf2;
    max-width: 46ch;
    margin: 0 0 .85rem;
}

.hero-linje { font-size: .88rem; color: #bcd9e7; margin: 0 0 1.5rem; }
.hero-linje a { color: #fff; }

.hero-knapper { display: flex; flex-wrap: wrap; gap: .85rem; margin: 0; }

.knapp-hero, .knapp-hero-tom {
    display: inline-block;
    padding: .6rem 1.35rem;
    font-family: var(--overskrift);
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
}

.knapp-hero { background: var(--varsel); color: var(--varsel-tekst); }
.knapp-hero:hover { background: #efc067; color: var(--varsel-tekst); }

.knapp-hero-tom { border-color: #5e9dba; color: #fff; }
.knapp-hero-tom:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }

/* Vipps' egen merkefarge, ikke MJFs palett — knappen skal gjenkjennes som
   Vipps uansett hvilken side den står på. Bytt til Vipps' offisielle
   knappegrafikk (selvhostet, se fonter/ for samme prinsipp — CSP tillater
   ikke CDN-bilder) før nettstedet går fra pilot til skarp drift; dette er en
   ren tekstknapp i påvente av det. */
.knapp-vipps {
    display: inline-block;
    padding: .55rem 1.3rem;
    font-family: var(--overskrift);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: #ff5b24;
    border: 1px solid #ff5b24;
}
.knapp-vipps:hover { background: #e14f1e; border-color: #e14f1e; }

/* Registreringsmerkene i heroen tegnes i lys petrol framfor mørk, siden
   underlaget her er mørkt. Samme teknikk som .objektkort::before. */
.hero-bilde { position: relative; }

.hero-bilde::before {
    content: "";
    position: absolute;
    inset: -6px;
    pointer-events: none;
    background-image:
        linear-gradient(#a8cfe0, #a8cfe0), linear-gradient(#a8cfe0, #a8cfe0),
        linear-gradient(#a8cfe0, #a8cfe0), linear-gradient(#a8cfe0, #a8cfe0),
        linear-gradient(#a8cfe0, #a8cfe0), linear-gradient(#a8cfe0, #a8cfe0),
        linear-gradient(#a8cfe0, #a8cfe0), linear-gradient(#a8cfe0, #a8cfe0);
    background-repeat: no-repeat;
    background-size: 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px;
    background-position:
        left 5px top 0, left 0 top 5px,
        right 5px top 0, right 0 top 5px,
        left 5px bottom 0, left 0 bottom 5px,
        right 5px bottom 0, right 0 bottom 5px;
}

.hero-bilde img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid #5e9dba;
}

/* Kortene i heroen tones når hero.js bytter mellom dem.
   -------------------------------------------------------------------------
   Varigheten MÅ stemme med TONING i hero.js. Står de i utakt, byttes bildet
   enten midt i toningen eller etter at den er ferdig.

   Uten JavaScript skjer ingenting her: kort nummer to og utover har `hidden`
   rett fra tjeneren, og forsiden står med ett bilde som før. */
.hero-kort {
    transition: opacity .4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .hero-kort { transition: none; }
}

/* HELE HEROBILDET ER EN LENKE.
   -------------------------------------------------------------------------
   Lenka må være block, ellers legger den seg som en tekstlinje rundt bildet og
   etterlater en stripe under kanten der understrekingen ville stått.

   Fokusmarkering er ikke pynt her: dette er den største lenka på forsiden, og
   den som taster seg gjennom siden må se når den står på den. */
.hero-bilde a {
    display: block;
    position: relative;
    text-decoration: none;
}

/* ⚠️ MÅ STÅ ETTER REGELEN OVER.
   -------------------------------------------------------------------------
   `[hidden]` er display:none i nettleserens egen stilark, og et UA-stilark
   taper mot enhver regel med en klasse i seg. Uten denne linja ville
   `display: block` over slått ut skjulingen, og ALLE kortene i heroen vist seg
   samtidig — stablet oppå hverandre.

   Det er en klassisk felle, og den er verdt en egen regel framfor å skrive om
   selektoren over: neste gang noen legger til en `.hero-bilde a`-regel, står
   vernet allerede der. */
.hero-bilde a[hidden] {
    display: none;
}

.hero-bilde a:focus-visible {
    outline: 3px solid var(--varsel);
    outline-offset: 4px;
}

/* Teksten ligger OVER bildet, ikke under.
   -------------------------------------------------------------------------
   Under bildet ville den skjøvet heroens to kolonner ut av høyde med
   hverandre, og høyden varierer med tittelens lengde — altså et sprang i
   layouten som avhenger av hvilket objekt som ble trukket.

   Toningen bak er det som gjør teksten lesbar uansett hva bildet viser. Et
   modellbilde kan være nesten hvitt (snø, lys bakgrunn) eller nesten svart
   (nattscene), og hvit tekst uten toning ville forsvunnet i det første. */
.hero-bildetekst {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 2.5rem .9rem .7rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
    color: #fff;
}

.hero-bildetittel {
    font-weight: 600;
    line-height: 1.25;

    /* To linjer er nok. En tittel på seks linjer ville dekket hele bildet den
       er ment å beskrive. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-bildepris {
    font-size: .82rem;
    opacity: .9;
}

/* Stående bilde i en liggende ramme.
   cover ville skåret bort topp og bunn — nettopp der en eske eller en bokrygg
   har teksten sin. contain viser hele bildet i samme ramme, så layouten står
   stille, og feltene rundt får heroens egen mørke farge framfor hvite striper.
   index.php velger et liggende bilde når det finnes; denne regelen gjelder når
   det ikke gjør det. */
.hero-bilde.staaende img {
    object-fit: contain;
    background: #17516b;
}

/* --------------------------------------------------------------------------
   Tre-stegs-forklaring
   -------------------------------------------------------------------------- */

/* TALLRUTER PÅ STATISTIKKSIDENE.
   -------------------------------------------------------------------------
   Egen klasse framfor å gjenbruke .stegrad/.steg fra forsiden. De to ser like
   ut, men gjør ulike jobber: .stegrad er tre faste kolonner med en overskrift
   og en forklarende setning — «1 · Se og by». Her er innholdet ET TALL, det er
   tallet som skal leses først, og antallet ruter varierer fra tre til seks.

   repeat(auto-fit, ...) framfor et fast antall kolonner er nettopp det som gjør
   at seks ruter ikke sprenger raden. */
.tallrad {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.25rem 1.5rem;
    margin: 1.5rem 0 2rem;
}

.tall {
    border-left: 3px solid var(--ramme);
    padding-left: .9rem;
}

.tall .verdi {
    display: block;
    font-size: 2rem;
    line-height: 1.05;
    font-weight: 600;
    color: var(--mjf-mork);

    /* Sifre i samme bredde, slik at kolonnen med tall står rett under
       hverandre framfor å vagle seg etter hvilke sifre som er med. */
    font-variant-numeric: tabular-nums;
}

.tall .merkelapp {
    display: block;
    font-size: .8rem;
    color: var(--dempet);
    margin-top: .3rem;
}

/* Søylene i månedstabellen er blokktegn, ikke et bilde eller en JS-graf:
   sidene skal kunne leses uten JavaScript, som resten av nettstedet. Tegnene
   er skjult for skjermlesere (aria-hidden) — tallet står i kolonnen ved siden
   av, og en opplesing av tjue blokktegn er støy. */
.soyle {
    color: var(--mjf-mork);
    opacity: .55;
    letter-spacing: -1px;
    white-space: nowrap;
}

.stegrad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ramme);
    margin-bottom: .5rem;
}

.steg h3 {
    font-size: 1.19rem;
    margin: 0 0 .35rem;
    color: var(--mjf-mork);
}

.steg p { font-size: .82rem; color: var(--dempet); margin: 0; }
.steg p strong { color: var(--tekst); }

@media (max-width: 860px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }
    .hero h1 { font-size: 2.25rem; }
    .stegrad { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* --------------------------------------------------------------------------
   Objektside — tre kolonner med spesifikasjon i sidefelt
   --------------------------------------------------------------------------
   Avløser .objekt-topp (linje 531), som blir stående ubrukt. Den regelen ligger
   over skillet på linje 862 og hører til designerens leveranse; blir stilarket
   erstattet på nytt, skal den følge med det som leveres.
   -------------------------------------------------------------------------- */

.objekt-layout {
    display: grid;
    gap: 2rem;
    grid-template-columns: 240px minmax(420px, 1.4fr) 300px;
    align-items: start;
    margin-top: 1.5rem;
}

/* Et objekt uten utfylte felt får ikke noe sidefelt, og da skal galleriet ikke
   klemmes inn i 240px-sporet. */
.objekt-layout.uten-sidefelt {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
}

.spesifikasjon-tittel {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mjf-mork);
    border-bottom: 1px solid var(--ramme);
    padding-bottom: .4rem;
}

.spesifikasjon-liste { margin: 0; }

.spec-rad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--ramme-svak);
    font-size: .82rem;
}

.spec-rad dt { color: var(--dempet); }
.spec-rad dd { margin: 0; }

.spec-filter {
    font-size: .75rem;
    color: var(--dempet);
    margin: .75rem 0 0;
}

/* Mellomtrinn: prisboksen trenger 300px og galleriet minst 420px, så
   spesifikasjonen er den som må vike først. Den legges i full bredde under de
   to andre framfor å presses sammen til en kolonne ingen kan lese. */
@media (max-width: 1080px) {
    .objekt-layout {
        grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    }

    .spesifikasjon {
        grid-column: 1 / -1;
        order: 3;
    }

    /* I full bredde flyter radene i flere spalter i stedet for å strekke to
       ord over hele siden. */
    .spesifikasjon-liste {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        column-gap: 2rem;
    }
}

@media (max-width: 860px) {
    .objekt-layout,
    .objekt-layout.uten-sidefelt { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Adminmeny
   --------------------------------------------------------------------------
   Arver .faner, men er navigasjon på øverste nivå og trenger derfor litt mer
   luft under seg enn fanene inne i en seksjon. Uten dette står de to radene med
   faner på gebyrsida rett oppå hverandre og ser ut som én.
   -------------------------------------------------------------------------- */

.adminmeny { margin-bottom: 2rem; }

/* --------------------------------------------------------------------------
   Følgeknapper i prisboksen
   --------------------------------------------------------------------------
   To skjemaer ved siden av hverandre. Uten dette stables de, fordi .skjema er
   en flex-kolonne — og da tar to knapper dobbelt så mye plass som de trenger i
   en boks som alt er smal.
   -------------------------------------------------------------------------- */

.folgeknapper {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.folgeknapper .skjema { margin: 0; }
.folgeknapper button { font-size: .85rem; }

/* --------------------------------------------------------------------------
   Objektliste — filtre i sidefelt, radliste
   -------------------------------------------------------------------------- */

.objektside-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2rem;
    align-items: start;
    margin-top: 1rem;
}

@media (max-width: 860px) {
    .objektside-layout { grid-template-columns: 1fr; }
}

/* Sidefeltet arver feltstilen fra .skjema — samme etiketter, samme felt, samme
   fokusmarkering som resten av nettstedet. Bare bredden og avstandene er egne.
   margin må nullstilles: .skjema har 1.5rem 0, og med align-items:start på
   rutenettet ville sidefeltet stått halvannen rem lavere enn lista. */
.filtersidefelt.skjema {
    max-width: none;
    display: grid;
    gap: .85rem;
    margin: 0;
}

.filtersidefelt .filtergruppe {
    border: 0;
    padding: 0;
    margin: 0;
}

.filtersidefelt .filtergruppe legend {
    padding: 0;
    margin-bottom: .35rem;
    font-size: .78rem;
    color: var(--dempet);
}

.filtersidefelt .radiogruppe {
    display: grid;
    gap: .25rem;
}

/* flex-direction MÅ settes eksplisitt: .skjema label har column, som gjør at
   etiketten legger seg over feltet. Det er riktig for et tekstfelt og feil for
   en radioknapp — uten denne linja står prikken over teksten sin. */
.filtersidefelt .radiovalg {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--tekst);
    margin: 0;
}

.filtersidefelt .radiovalg input[type="radio"] {
    width: auto;
    margin: 0;
    accent-color: var(--mjf);
}

.filtersidefelt .nullstill {
    font-size: .82rem;
    justify-self: start;
}

.listetopp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.listetopp p { margin: 0; }

.visningsveksler {
    display: flex;
    border: 1px solid var(--ramme);
}

.visningsveksler button {
    font: inherit;
    font-size: .8rem;
    padding: .3rem .85rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--tekst);
    cursor: pointer;
}

.visningsveksler button:hover { background: var(--mjf-100); }

.visningsveksler button.valgt {
    background: var(--mjf);
    color: #fff;
}

.radliste { border-top: 1px solid var(--ramme); }

.radliste-rad {
    display: grid;
    grid-template-columns: 96px 1fr 140px 130px;
    gap: 1rem;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid var(--ramme-svak);
}

.radliste-rad:hover { background: rgba(29, 31, 32, .04); }

.radliste-bilde {
    display: block;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--ramme);
    overflow: hidden;
    background: #e4e4e6;
}

.radliste-bilde img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.radliste-bilde.tomt {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    color: var(--dempet);
    text-decoration: none;
}

.radliste-tittel {
    font-family: var(--overskrift);
    font-weight: 600;
    font-size: 1.19rem;
    line-height: 1.15;
    text-decoration: none;
}

.radliste-spec {
    font-size: .75rem;
    color: var(--dempet);
    margin-top: .15rem;
}

.radliste-pris {
    font-family: var(--overskrift);
    font-weight: 600;
    font-size: 1.31rem;
    line-height: 1.15;
    color: var(--tittel);
}

.radliste-prismerknad,
.radliste-selger {
    font-size: .75rem;
    color: var(--dempet);
}

.radliste-status { text-align: right; }
.radliste-selger { margin-top: .25rem; }

/* På smal skjerm faller pris og status ned under tittelen, i samme kolonne, og
   miniatyren strekker seg over alle tre radene. */
@media (max-width: 860px) {
    .radliste-rad {
        grid-template-columns: 76px 1fr;
        align-items: start;
        row-gap: .35rem;
    }

    .radliste-bilde { grid-row: 1 / span 3; }

    .radliste-pris-celle,
    .radliste-status {
        grid-column: 2;
        text-align: left;
    }
}


/* --------------------------------------------------------------------------
   Skjema i to spalter — utleggingsskjemaet på nytt-objekt.php
   --------------------------------------------------------------------------
   Skjemaet var 640 px bredt midt på en 1100 px side, og hver hjelpetekst lå
   under feltene den forklarte. Resultatet var en side som var nesten dobbelt
   så lang som den trengte å være, med en tom høyrekant hele veien ned.

   .skjemadel er én bolk: feltene i .skjemafelt, hjelpeteksten som søsken rett
   etter. Over 1000 px legges de i hver sin spalte, side om side. Under stables
   de, nøyaktig som før.

   Rekkefølgen i HTML-en er uendret — felt, så forklaring. Det er spalte-
   plasseringen som flyttes, ikke innholdet, så en skjermleser og et smalt
   vindu leser det i samme rekkefølge som alltid.
   -------------------------------------------------------------------------- */

.skjemadel,
.skjemafelt {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 1000px) {
    /* Skjemaet får bruke hele bredden, men FELTENE gjør det ikke: de holdes på
       34rem av regelen under. Et tekstfelt på tusen piksler er ikke lettere å
       fylle ut enn ett på fem hundre — det er bare vanskeligere å lese
       etiketten til, fordi øyet må helt tilbake til venstre for hver linje. */
    .skjema.bred-skjema { max-width: 100%; }

    /* Felt som står rett i skjemaet, utenfor en .skjemadel — overskrifter,
       meldinger og enkeltfelt — beholder samme bredde som feltspalten, slik at
       venstrekanten er den samme hele veien ned. */
    .bred-skjema > label,
    .bred-skjema > .feltpar,
    .bred-skjema > .felttrio { max-width: 34rem; }

    /* Gebyrboksen er UNNTAKET, og får hele bredden. Den er ikke et felt man
       fyller ut, men en opplysning man leser én gang før man sender inn —
       og teksten er lang nok til at 34rem gjorde den til en høy, smal søyle
       under et skjema som ellers hadde blitt bredt. */
    .bred-skjema > .melding { max-width: 100%; }

    .bred-skjema .skjemadel {
        display: grid;
        grid-template-columns: 34rem minmax(0, 1fr);
        gap: 1rem 2.5rem;

        /* Uten denne strekker en kort hjelpetekst seg like høy som feltene
           ved siden av, og teksten havner loddrett midtstilt mot ingenting. */
        align-items: start;
    }

    .bred-skjema .skjemadel > .skjemafelt { grid-column: 1; }

    /* grid-column: 2 på HVER hjelpetekst, ikke bare den første. En bolk kan ha
       to avsnitt, og uten dette ville avsnitt nummer to falt ned i spalte 1 —
       under feltene, som er akkurat det oppsettet skulle bli kvitt. */
    .bred-skjema .skjemadel > .hjelpetekst {
        grid-column: 2;
        margin: 0;
    }
}

/* --------------------------------------------------------------------------
   Ønskes kjøpt (oppsett-45.sql)
   --------------------------------------------------------------------------

   Ønskene låner det meste av objektlista: .radliste, .spesifikasjon-liste,
   .merke og .sporsmal-par brukes som de er. Det er ikke latskap — et ønske og
   et objekt skal LESES likt, og to oppstillinger for det samme tvinger
   leseren til å lære seg begge.

   Det som står her er bare det ønskene har som objektene ikke har. */

/* Merket på ønskesiden. Rammen framfor fyll, som .fastpris: et ønske er ikke
   en tilstand på noe som selges, det er en annen KATEGORI av annonse — og et
   fylt merke ved siden av statusmerkene ville sett ut som enda en status. */
.merke.onskemerke {
    background: transparent;
    color: var(--mjf-mork);
    border: 1px solid var(--mjf);
    vertical-align: middle;
}

/* Ett svar på et ønske. Samme venstrekant som .sporsmal-par, og av samme
   grunn: uten den flyter tre svar sammen til én tekstblokk, og leseren mister
   hvor det ene slutter og det neste begynner. */
.svarliste { margin: 1.5rem 0; }

.svarkort {
    border-left: 3px solid var(--ramme);
    padding: .1rem 0 .6rem 1rem;
    margin: 1.4rem 0;
}

/* Et ubehandlet svar skal SES. Samme farge som varselrammen ellers, slik at
   «noe venter på deg» ser likt ut over hele nettstedet.

   Klassen settes i onske.php, ikke utledet med :has() fra knappene inni. Samme
   valg og samme grunn som `.skjema label.viktig` lenger opp — se merknaden
   der. */
.svarkort.ubehandlet { border-left-color: var(--varsel-tekst); }

.svarkort-topp {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: .4rem;
}

/* Knappene ligger side om side, men er TO SKJEMAER — «ja» og «nei» er to
   ulike handlinger med hvert sitt CSRF-token, ikke to verdier i ett skjema.
   Uten denne stiller de seg under hverandre, siden hvert <form> er en blokk. */
.svarkort-knapper {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .8rem;
}

.svarkort-knapper form { margin: 0; }

/* Bildene i redigeringsskjemaet. Hvert bilde med sin egen sletteknapp, som
   også er sitt eget skjema — se begrunnelsen i nytt-onske.php. */
.onskebilder-rediger {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin: .8rem 0;
}

.onskebilde-rad {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
}

.onskebilde-rad img {
    border: 1px solid var(--ramme);
    border-radius: 3px;
}

.onskebilde-rad form { margin: 0; }