/* ===========================================================================
   MJ-bladet på nett — samme uttrykk som portal.mjf.no

   Variabler, fonter og komponenter er hentet fra `C:\mjf-portal\stil.css`, så
   de to tjenestene ser ut som samme forening. Endres noe der, skal det endres
   her også — det er to filer, ikke ett delt stilark, fordi tjenestene ligger
   på hvert sitt domene og ikke kan dele filer.

   ⚠️ Fontene er SELVHOSTET i fonter/. CSP-en er `style-src 'self'` og
   `font-src 'self'`, så Google Fonts ville blitt blokkert — stille.
   =========================================================================== */

@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-hover:  #164f68;
  --mjf-100:    #e8f2f7;
  --mjf-200:    #cfe4ee;

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

  --ok-bg:      #e7f2ec;
  --ok-kant:    #2e7d4f;
  --feil-bg:    #fbeceb;
  --feil-kant:  #b3372a;

  --overskrift: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --brodtekst:  "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tallfont:   ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --brei:       1100px;
}

* { box-sizing: border-box; }

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

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

h1, h2, h3 {
  font-family: var(--overskrift);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.12;
}
h1 { font-size: 2.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.85rem; margin: 2.25rem 0 .85rem; color: var(--mjf-mork); }
.kort > h2:first-child { margin-top: 0; font-size: 1.35rem; }

/* --- Topplinje ----------------------------------------------------------- */

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

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

/* ⚠️ Samme klasser og samme mål som portalen (stil.css:145). Strektegningen
   farges hvit med filter framfor å ha en egen hvit SVG — én fil å vedlikeholde
   i stedet for to som kan komme i utakt. */
.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;
}
.logo-merke { line-height: 0; }
.logo-merke img {
  display: block;
  width: 30px; height: 30px;
  filter: brightness(0) invert(1);
}
.logo-rest { color: #fff; font-weight: 400; margin-left: .1rem; }

.topp-hoyre { display: flex; align-items: center; gap: 1rem; font-size: .92rem; }
.topp-hoyre a, .topp-hoyre span { color: #fff; }
.topp-hoyre a { text-decoration: none; opacity: .85; }
.topp-hoyre a:hover { opacity: 1; text-decoration: underline; }
.topp-hoyre form { margin: 0; }
.topp-hoyre button {
  font: inherit; background: none; border: 0; padding: 0;
  color: #fff; opacity: .85; cursor: pointer; text-decoration: none;
}
.topp-hoyre button:hover { opacity: 1; text-decoration: underline; }

/* --- Innhold ------------------------------------------------------------- */

/* ⚠️ Grunnregel for mjf.no (Morten): teksten bruker hele bredden av .side.
   Ingen smal kolonne (max-width i rem/ch) på sider eller tekst. */
.side { max-width: var(--brei); margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }

.kort {
  background: var(--flate);
  border: 1px solid var(--ramme);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.ingress { color: var(--dempet); margin: 0 0 1.5rem; }
.hjelp   { color: var(--dempet); font-size: .9rem; line-height: 1.55; }

/* --- Knapper ------------------------------------------------------------- */

.knapp {
  display: inline-block;
  font: inherit;
  font-size: .95rem;
  padding: .45rem 1rem;
  border: 1px solid var(--mjf);
  background: var(--flate);
  color: var(--mjf-mork);
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
.knapp:hover { background: var(--mjf-100); }

.knapp.primar { background: var(--mjf); border-color: var(--mjf); color: #fff; }
.knapp.primar:hover { background: var(--mjf-mork); border-color: var(--mjf-mork); }

.knapp.liten { font-size: .85rem; padding: .3rem .7rem; }
.knapp.bred  { display: block; width: 100%; text-align: center; }
.knapp.fare  { border-color: var(--feil-kant); color: var(--feil-kant); }
.knapp.fare:hover { background: var(--feil-bg); }

/* Vipps-knappen skal se ut som en Vipps-knapp og ikke som resten av siden —
   det er gjenkjennelsen som gjør at folk tør å trykke. Samme oransje som
   portalen og auksjonen bruker. */
.knapp.vipps {
  background: #ff5b24; border-color: #ff5b24; color: #fff; font-weight: 600;
}
.knapp.vipps:hover { background: #e84d19; border-color: #e84d19; }

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

.felt { margin-bottom: 1rem; }
.felt label {
  display: block; font-weight: 600; font-size: .92rem; margin-bottom: .25rem;
}
.felt input {
  width: 100%;
  font: inherit;
  padding: .45rem .55rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  color: var(--tekst);
  border-radius: 0;
}
.felt input:focus,
.felt select:focus { outline: 2px solid var(--mjf); outline-offset: -1px; }

/* Nedtrekkslister i et vanlig skjema. `.filterrutenett select` dekket bare
   registerets filtre, og et skjemafelt som ikke ser ut som naboene sine ser
   ut som en feil. */
.felt select {
  width: 100%;
  font: inherit;
  padding: .45rem .55rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  color: var(--tekst);
  border-radius: 0;
}
.felt input[readonly] { background: var(--bakgrunn, #f4f4f4); color: var(--dempet); }

/* ⚠️ EN AVKRYSSINGSBOKS ER IKKE ET TEKSTFELT. `.felt input { width: 100% }`
   strakk den over hele skjemaets bredde, og fordi `.felt label` er `block`,
   havnet teksten på linja under. Resultatet var en boks som svevde midtstilt,
   løsrevet fra ordet den hører til — «denne knappen er litt skjult», målt på
   en ekte bruker 20.09.2026. */
.felt input[type="checkbox"],
.felt input[type="radio"] { width: auto; margin: 0; flex: none; }

.felt--av label {
  display: flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
}
.felt--av label code { font-weight: 400; }
.felt .hjelp { display: block; margin-top: .25rem; }

/* Én linje: etikett, nedtrekk, knapp. Til små GET-skjemaer som bare velger
   hva sida skal handle om. */
.linjeskjema {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1.25rem;
}
.linjeskjema label { font-weight: 600; font-size: .92rem; }
.linjeskjema select {
  font: inherit;
  padding: .4rem .55rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  color: var(--tekst);
  border-radius: 0;
  max-width: 100%;
}

.eller {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.25rem 0; color: var(--dempet); font-size: .9rem;
}
.eller::before, .eller::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--ramme);
}

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

.melding {
  padding: .7rem .9rem;
  border-left: 4px solid var(--ramme);
  background: var(--flate);
  margin: 0 0 1.25rem;
}
.melding.ok   { border-color: var(--ok-kant);   background: var(--ok-bg); }
.melding.feil { border-color: var(--feil-kant); background: var(--feil-bg); }

/* --- Tabell -------------------------------------------------------------- */

.tabell { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabell td, .tabell th {
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--ramme-svak);
  text-align: left;
  vertical-align: top;
}
.tabell th { font-weight: 600; font-size: .85rem; color: var(--dempet); }
.tabell .tall { font-family: var(--tallfont); font-size: .88rem; }
.tabell .dempet { color: var(--dempet); }
.tabell .ja  { color: var(--ok-kant); }
.tabell .nei { color: var(--feil-kant); font-weight: 600; }

/* Sorterbare tabeller. Knappene legges inn av js/tabellsortering.js; uten
   skriptet er overskriftene vanlig tekst og tabellen står som serveren la den. */
.sorter {
  display: inline-flex; align-items: baseline; gap: .3rem;
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.sorter::after { content: "\2195"; font-size: .95em; opacity: .55; }
.sorter:hover { color: var(--mjf-hover); }
.sorter:hover::after { opacity: 1; }
.sorter:focus-visible { outline: 2px solid var(--mjf); outline-offset: 2px; }
th[aria-sort] .sorter { color: var(--tekst); }
th[aria-sort="ascending"]  .sorter::after { content: "\25B2"; color: var(--mjf); opacity: 1; }
th[aria-sort="descending"] .sorter::after { content: "\25BC"; color: var(--mjf); opacity: 1; }

/* --- Forsidegalleri ------------------------------------------------------ */

.galleri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1.5rem;
}
/* ⚠️ Kortet er en beholder, ikke en lenke. Det bærer to: forsida fører til
   lesinga, «Om utgaven» til detaljsida. */
.blad { display: block; }
.blad__les { display: block; text-decoration: none; color: inherit; }
.blad img {
  width: 100%; display: block; background: var(--flate);
  border: 1px solid var(--ramme);
  transition: box-shadow .14s, transform .14s;

  /* ⚠️ Plassen settes av før bildet er lastet. Uten dette er forsida 0 px
     høy til den kommer, og hele galleriet hopper nedover etter hvert som
     129 bilder faller på plass — verst på en treg linje, som er nettopp der
     det merkes mest. A4-forholdet stemmer for de aller fleste, og gjelder
     uansett bare til bildet selv overtar. */
  aspect-ratio: 210 / 297;
  object-fit: cover;
}
/* Bare forsidelenka løfter bildet. Gjorde hele kortet det, pekte animasjonen
   på lesinga også når musa sto over «Om utgaven». */
.blad__les:hover img { box-shadow: 0 4px 14px rgba(0, 0, 0, .18); transform: translateY(-2px); }
.blad b { display: block; font-size: .95rem; }
.blad span { display: block; font-size: .85rem; color: var(--dempet); }

.blad__om {
  display: inline-block;
  margin-top: .4rem;
  font-size: .85rem;
}

@media (max-width: 640px) {
  h1 { font-size: 2.1rem; }
  .side { padding: 1.25rem 1rem 3rem; }
}

/* --- Nøkkeltall og søyler ------------------------------------------------ */

.noekkeltall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1px;
  background: var(--ramme-svak);
  border: 1px solid var(--ramme-svak);
  margin: 0 0 1.5rem;
}
.noekkeltall__ett { background: var(--flate); padding: .9rem 1rem; }
.noekkeltall__ett b {
  display: block;
  font-family: var(--overskrift);
  font-size: 2rem; line-height: 1.1; font-weight: 600;
  color: var(--mjf);
}
.noekkeltall__ett span { font-size: .82rem; color: var(--dempet); }

/* ⚠️ <meter> og ikke en div med style="width:…". CSP-en har style-src 'self',
   så inline stilattributter blokkeres — stille. Søylene ville vært usynlige
   uten en eneste feilmelding. `value` er et vanlig attributt. */
.soylefelt { width: 40%; }
.soyle {
  display: block; width: 100%; height: .7rem;
  -webkit-appearance: none; appearance: none;
  background: var(--ramme-svak); border: 0;
}
.soyle::-webkit-meter-bar { background: var(--ramme-svak); border: 0; height: .7rem; }
.soyle::-webkit-meter-optimum-value { background: var(--mjf); }
.soyle::-moz-meter-bar { background: var(--mjf); }

pre {
  background: var(--bakgrunn);
  border: 1px solid var(--ramme-svak);
  padding: .7rem .8rem;
  overflow-x: auto;
  font-family: var(--tallfont);
  font-size: .82rem;
  line-height: 1.5;
}
code {
  font-family: var(--tallfont);
  font-size: .88em;
  background: var(--bakgrunn);
  padding: .1em .3em;
}

/* --- Bunntekst ----------------------------------------------------------- */

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

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

/* Én spalte for gjesten, to for den innloggede. Uten maksbredde strekker den
   ene spalta seg over hele 1100 px, og adressen blir én lang linje. */
.bunn-inn > div { max-width: 46ch; }

.bunn a { color: #dbeaf2; }
.bunn a:hover { color: #fff; }
.bunn strong { color: #fff; }

.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; }

/* --- Artikkelregister ---------------------------------------------------- */

.sok { margin-bottom: 1.5rem; }
.sok .felt:last-of-type { margin-bottom: 0; }

.filtre { margin: .25rem 0 1rem; }
.filtre summary {
  cursor: pointer; font-weight: 600; font-size: .95rem;
  color: var(--mjf); padding: .35rem 0;
}
.filtre summary:hover { color: var(--mjf-hover); }

.filterrutenett {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .75rem 1rem;
  padding: .75rem 0 .25rem;
}
.filterrutenett .felt { margin-bottom: 0; }
.filterrutenett select {
  width: 100%;
  padding: .4rem .5rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  font: inherit;
  font-size: .9rem;
  border-radius: 0;
}
.filterrutenett select:focus { outline: 2px solid var(--mjf); outline-offset: -1px; }

.merkelapper { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; }
.merkelapp {
  font: inherit; font-size: .85rem;
  background: var(--mjf-100);
  border: 1px solid var(--mjf-200);
  color: var(--mjf-mork);
  padding: .2rem .55rem;
  cursor: pointer;
}
/* Krysset står som tegn og ikke som bilde — ett tegn mindre å laste. */
.merkelapp::after { content: " ×"; font-weight: 600; }
.merkelapp:hover { background: var(--mjf-200); }
.merkelapp--tom { background: none; border-color: var(--ramme); color: var(--dempet); }

/* Tittelen er en knapp, ikke en lenke: den åpner en modal og går ikke noe
   sted. En <a href="#"> ville lagt en tom oppføring i historikken. */
.tittel {
  font: inherit; font-weight: 600; text-align: left;
  background: none; border: 0; padding: 0;
  color: var(--mjf); cursor: pointer;
}
.tittel:hover { text-decoration: underline; }
.tittel .del { font-weight: 400; color: var(--dempet); }

/* ⚠️ Faste kolonnebredder. Uten dem hopper tabellen når «Vis flere» legger
   til rader med lengre sammendrag, og man mister stedet man leste. */
.register { table-layout: fixed; }
.register .kol-utgave { width: 6rem; }
.register .kol-tittel { width: 14rem; }
.register .kol-av { width: 10rem; }

/* ⚠️ HELE SAMMENDRAGET, ikke avkortet. Første versjon klippet det til to
   linjer for å holde radhøyden nede — men da må man åpne hver rad for å se om
   den er den man leter etter, og det er nettopp det sammendraget skal spare
   en for. Dagens register viser alt, og det er bedre. */
.register .kol-sammendrag { font-size: .88rem; line-height: 1.5; }

/* Rada under pekeren markeres. Med fire kolonner og lange sammendrag er det
   lett å lese på tvers av feil rad. */
.register tbody tr:hover { background: var(--mjf-100); }

.midtstilt { text-align: center; margin: 1.5rem 0; }

/* --- Modal --------------------------------------------------------------- */

body.modal-apen { overflow: hidden; }

.modal { position: fixed; inset: 0; z-index: 50; }
.modal[hidden] { display: none; }

.modal__dekke { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }

.modal__boks {
  position: relative;
  max-width: 60rem;
  margin: 2rem auto;
  max-height: calc(100vh - 4rem);
  background: var(--flate);
  border: 1px solid var(--ramme);
  display: flex;
  flex-direction: column;
}

.modal__hode {
  background: var(--mjf); color: #fff;
  padding: .9rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  flex: none;
}
.modal__hode h2 {
  margin: 0; font-size: 1.35rem; color: #fff;
  flex: 1 1 auto;
}
.modal__lukk {
  font: inherit; font-size: 1.6rem; line-height: 1;
  background: none; border: 0; color: #fff; cursor: pointer;
  padding: 0 .25rem;
}
.modal__lukk:hover { color: var(--mjf-200); }

.modal__kropp {
  display: flex; gap: 1.5rem; padding: 1.25rem;
  overflow-y: auto;
  align-items: flex-start;
}
.modal__felter { flex: 1 1 auto; min-width: 0; }
.modal__felter td:first-child {
  width: 9rem; font-weight: 600; color: var(--mjf); font-size: .9rem;
}

.modal__bilde { flex: 0 0 17rem; text-align: center; }
.modal__bilde img {
  width: 100%; display: block;
  border: 1px solid var(--ramme);
  background: var(--flate);
}
.modal__bla {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  margin-top: .6rem; font-size: .85rem; color: var(--dempet);
}
.modal__bla .knapp[disabled] { opacity: .35; cursor: default; }

.modal__sammendrag {
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid var(--ramme-svak);
  font-size: .95rem; line-height: 1.6;
  overflow-y: auto;
  flex: none;
}
.modal__sammendrag:empty { display: none; }
/* Lenka til artikkelsida, nederst i modalen (03.10.2026), og «Rediger
   oppsummering» for administratorene og redaksjonen (04.10.2026). */
.modal__fot {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0;
  padding: .75rem 1.25rem 1rem;
  border-top: 1px solid var(--ramme-svak);
  flex: none;
}
.modal__fot[hidden] { display: none; }
/* ⚠️ `.knapp` er inline-block, og det slår nettleserens egen regel for
   `hidden`. Uten denne linja står en skjult knapp synlig. */
.modal__fot .knapp[hidden] { display: none; }

/* Framhevingsvalget ved «Rediger oppsummering» (09.10.2026): etikett,
   nedtrekk og «Lagre» på én linje. Se «Framheving» i js/register.js. */
.modal__framhev {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: 0;
}
/* Samme grunn som knappen over: `display` slår `hidden`. */
.modal__framhev[hidden] { display: none; }
.modal__framhev label,
.artikkel__framhev label { font-weight: 600; font-size: .85rem; color: var(--mjf-mork); }
.modal__framhev select,
.artikkel__framhev select {
  font: inherit; font-size: .85rem;
  padding: .28rem .45rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  color: var(--tekst);
  border-radius: 0;
}
.modal__framhev select:focus,
.artikkel__framhev select:focus { outline: 2px solid var(--mjf); outline-offset: -1px; }

@media (max-width: 720px) {
  .modal__boks { margin: 0; max-height: 100vh; height: 100vh; }
  .modal__kropp { flex-direction: column-reverse; }
  .modal__bilde { flex: none; width: 100%; max-width: 17rem; margin: 0 auto; }
  .register .kol-av, .register .kol-sammendrag { display: none; }
  .register .kol-utgave { width: 5rem; }
}

/* --- Meny i topplinja ---------------------------------------------------- */

.topp-meny { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; }
.topp-meny a {
  color: #fff; text-decoration: none;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
  font-size: .95rem;
}
.topp-meny a:hover { border-bottom-color: #fff; }

/* «Bli medlem»: hvit knapp ytterst til høyre, etter «Logg inn», bare for
   gjester (se mal.php). Mål og farger fra MJB-forside-overlevering.md.

   ⚠️ `.topp a.topp-medlem`, IKKE `.topp-meny a.topp-medlem` som i
   overleveringen. Knappen står i `.topp-hoyre`, og der gir `.topp-hoyre a`
   den `opacity: .85` og understrek ved hover. Denne selektoren slår begge, og
   den treffer også i portalen og auksjonen, der menyen er `.topp nav`. */
.topp a.topp-medlem {
  background: #fff;
  color: var(--mjf-mork);
  font-weight: 600;
  padding: .35rem .9rem;
  border-bottom: 0;
  opacity: 1;
  text-decoration: none;
  white-space: nowrap;
}
.topp a.topp-medlem:hover { background: var(--mjf-100); color: var(--mjf-hover); text-decoration: none; }

/* ⚠️ PÅ MOBIL: «Logg inn» og «Bli medlem» OPP VED LOGOEN, menyen under.
   Ellers la de seg hver på sin linje under menyen, og toppen ble fire linjer
   (172 px ved 375 px, prøvd på telefon 28.09.2026). Bare for gjester: den
   innloggedes navn, Mine enheter og Logg ut får ikke plass ved logoen uansett,
   og det oppsettet er ikke prøvd. `margin-left: auto` holder dem til høyre
   også når skjermen er så smal at de må ha sin egen linje.

   ⚠️ 820 PX, IKKE MOBILGRENSA PÅ 640. Logo, meny, «Logg inn» og «Bli medlem»
   på én linje trenger 721 px pluss 40 px luft (målt i Chrome på Windows).
   Mellom 640 og 760 la de to seg ellers alene til venstre på en linje under
   menyen — samme feil, bare på nettbrett.

   ⚠️ MENYEN FÅR HELE LINJA (`flex-basis: 100%`). Uten den fikk alt plass på
   én linje mellom 761 og 780 px — i den nye rekkefølgen, med «Galleri» etter
   «Bli medlem». Med den blir det alltid to linjer i riktig rekkefølge under
   grensa, og grensa kan ligge romslig over det som trengs: en telefon med
   bredere skrift enn den målte, flytter ikke problemet inn i et bånd. */
@media (max-width: 820px) {
  .topp-inn--gjest .topp-hoyre { order: 1; margin-left: auto; }
  .topp-inn--gjest .topp-meny  { order: 2; flex-basis: 100%; }
}

/* --- Forsidegalleri ------------------------------------------------------ */

.aarsrad {
  display: flex; flex-wrap: wrap; gap: .3rem .5rem;
  margin: 0 0 2rem;
  font-family: var(--tallfont); font-size: .85rem;
}
.aarsrad a {
  padding: .2rem .5rem;
  border: 1px solid var(--ramme-svak);
  background: var(--flate);
  text-decoration: none;
}
.aarsrad a:hover { background: var(--mjf-100); border-color: var(--mjf-200); }

/* --- Filterrad over galleriet --------------------------------------------
   To lenker, ikke en nedtrekksliste: begge utvalgene og størrelsen på dem er
   synlige uten et klikk først. Det aktive valget bærer `aria-current="page"`,
   så en skjermleser får det samme som øyet. */
.valgrad {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.5rem;
}
.valgrad a {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .4rem .85rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  color: inherit; text-decoration: none;
  font-size: .9rem;
}
.valgrad a b {
  font-family: var(--tallfont); font-weight: 400; font-size: .8rem;
  color: var(--dempet);
}
.valgrad a:hover { background: var(--mjf-100); border-color: var(--mjf-200); }

.valgrad a[aria-current] {
  background: var(--mjf); border-color: var(--mjf); color: #fff;
}
.valgrad a[aria-current] b { color: rgba(255, 255, 255, .8); }

/* Gratisvalget bærer den samme grønne som båndet under forsidene, så filteret
   og merkinga er tydelig samme sak. */
.valgrad a.valgrad__gratis[aria-current] { background: #2e7d32; border-color: #2e7d32; }
.valgrad a.valgrad__gratis[aria-current] b { color: #cde9cf; }

/* Årstallet er et hoppmål. Uten avstand fra toppen havner overskrifta
   akkurat i kanten når man klikker seg hit. */
.side h2[id] { scroll-margin-top: 1rem; }

.aargang {
  font-family: var(--brodtekst);
  font-size: .85rem; font-weight: 400;
  color: var(--dempet);
  margin-left: .75rem;
}

/* Etiketten under forsida. ⚠️ Samme grønne som dagens galleri (#2e7d32), så
   merkinga er den medlemmene allerede kjenner igjen — og den ligger UNDER
   bildet, ikke oppå, så den ikke dekker mastheaden. */
.blad__merke { padding: .5rem 0 0; }
.blad__merke em {
  display: block;
  font-style: normal; font-weight: 700;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: #2e7d32;
}
.blad__merke--gratis {
  background: #2e7d32;
  padding: .4rem .6rem .5rem;
}
.blad__merke--gratis em   { color: #a5d6a7; }
.blad__merke--gratis b    { color: #fff; }
.blad__merke--gratis span { color: #cde9cf; }

/* --- Ett nummer stort: utgave.php og delt.php ---------------------------- */

/* Forsida brukte dette oppsettet til 28.09.2026. Nå har den sitt eget, i
   css/forside.css, og klassene her er utgavesidas og delingssidas. */

.siste {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  margin: 0 0 2rem;
}
.siste__forside img {
  width: 100%; display: block;
  border: 1px solid var(--ramme);
  background: var(--flate);
  aspect-ratio: 210 / 297;
  object-fit: cover;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
}

/* Blavideoen under forsida på utgavesida — se blad_video() i katalog.php.
   Bakgrunnen er videoens egen petrol, så feltet ikke blinker hvitt mens
   plakaten lastes. */
.siste__video { margin: 1.25rem 0 0; }
.siste__video video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  background: #0e425e;
  border: 1px solid var(--ramme);
}
.siste__video figcaption { margin-top: .4rem; font-size: .85rem; color: var(--dempet); }

.siste__stikk {
  margin: 0 0 .25rem;
  font-family: var(--overskrift);
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .85rem; font-weight: 600;
  color: var(--mjf);
}
.siste__tekst h1 { margin-top: 0; }
.gratis { color: #2e7d32; }

/* ⚠️ Punktene lages av blad_punkter() i mal.php, og det er kallerens
   tegnbudsjett som bestemmer hvor mange de blir — ikke noe her. utgave.php
   viser hele sammendraget. */
.siste__punkter {
  list-style: none;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
}
.siste__punkter li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .7rem;
  line-height: 1.55;
}
.siste__punkter li::before {
  content: "";
  position: absolute;
  left: .15rem; top: .62em;
  width: .45rem; height: .45rem;
  background: var(--mjf);
}
.siste__punkter strong { color: var(--tekst); }

/* --- Innholdsfortegnelse ------------------------------------------------- */

.innhold { padding-bottom: .5rem; }

.innholdsliste { list-style: none; margin: 0; padding: 0; }

/* ⚠️ TRE CELLER I HVER LINJE: artikkelen (sidetall og tittel), forfatteren og
   snakkebobla. Forfatteren og bobla er egne lenker og kan ikke stå inni
   artikkellenka — se utgave.php. Kolonnen til bobla er `auto`, og blir null
   bred når spørsmålene er slått av. */
.innholdsliste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 14rem) auto;
  grid-template-areas: "artikkel av qa";
  align-items: baseline;
  border-bottom: 1px solid var(--ramme-svak);
}
.innholdsliste li:last-child { border-bottom: 0; }

.innholdsliste__artikkel {
  grid-area: artikkel;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: .6rem .25rem;
  text-decoration: none;
  color: inherit;
}
a.innholdsliste__artikkel:hover { background: var(--mjf-100); }

.innholdsliste__side {
  font-family: var(--tallfont); font-size: .85rem;
  color: var(--dempet); text-align: right;
}
.innholdsliste__tittel { font-weight: 600; color: var(--mjf); }
.innholdsliste__tittel em { font-weight: 400; font-style: normal; color: var(--dempet); }

/* .75rem + artikkelens .25rem = den rommen kolonnene hadde før. */
.innholdsliste__av {
  grid-area: av;
  padding: .6rem .25rem .6rem .75rem;
  font-size: .88rem; color: var(--dempet);
}

/* Forfatteren som lenke, for medlemmer (03.10.2026). Dempet som navnet var,
   med en svak strek under så det synes at det kan trykkes på. Brukes også på
   artikkelsida. */
.forfatterlenke {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ramme);
  text-underline-offset: 3px;
}
.forfatterlenke:hover { color: var(--mjf); text-decoration-color: currentColor; }

/* --- Veier videre -------------------------------------------------------- */

.veier {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
}
.vei {
  display: block;
  padding: 1.1rem 1.25rem;
  background: var(--flate);
  border: 1px solid var(--ramme-svak);
  text-decoration: none; color: inherit;
}
.vei:hover { border-color: var(--mjf-200); background: var(--mjf-100); }
.vei b { display: block; font-size: 1.05rem; color: var(--mjf); margin-bottom: .25rem; }
.vei span { font-size: .9rem; color: var(--dempet); }

@media (max-width: 720px) {
  .siste { grid-template-columns: 1fr; gap: 1.25rem; }

  /* ⚠️ GRENSA PÅ LENKA, IKKE PÅ SPALTA. Forsida skal være 14rem på telefon,
     men videoen under den skal ha hele bredden — i 14rem (224 px) ble den et
     frimerke. Forsida ligger i en <a> både her og i delt.php. */
  .siste__forside > a { display: block; max-width: 14rem; }
  /* Forfatteren på egen linje under tittelen, rett under den; bobla over
     begge linjene til høyre. 3.5rem = .25 + 2.5 + .75, der tittelen står. */
  .innholdsliste li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "artikkel qa" "av qa";
  }
  .innholdsliste__artikkel { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .75rem; }
  .innholdsliste li.med-av .innholdsliste__artikkel { padding-bottom: .1rem; }
  .innholdsliste__av { padding: 0 .25rem .6rem 3.5rem; font-size: .85rem; }
}

/* --- Utgaveoversikt ------------------------------------------------------ */

.utgaver { table-layout: fixed; }
.utgaver .kol-utgave { width: 7rem; }
.utgaver .kol-av { width: 11rem; }

.utgaver td.tall em,
.utgaver td.tall .dempet {
  display: block;
  font-style: normal; font-weight: 700;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
}
.utgaver td.tall .dempet { font-weight: 400; text-transform: none; letter-spacing: 0; }
.utgaver tbody tr:hover { background: var(--mjf-100); }

/* Innholdslista i tabellen. Bare titlene — detaljene bor på utgave.php. */
.om__titler { list-style: none; margin: 0; padding: 0; }
.om__titler li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: .2rem;
  font-size: .88rem; line-height: 1.45;
}
.om__titler li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: .3rem; height: .3rem;
  background: var(--mjf);
}
.om__flere::before { display: none; }
.om__flere { font-style: italic; color: var(--dempet); }

@media (max-width: 720px) {
  .utgaver .kol-av { display: none; }
  .utgaver .kol-utgave { width: 5.5rem; }
}

/* --- Lesetekst (hjelp, personvern) --------------------------------------- */

/* Hele bredden, også for løpende tekst (grunnregelen over .side). */
.lesetekst ul, .lesetekst ol { padding-left: 1.25rem; }
.lesetekst li { margin-bottom: .5rem; line-height: 1.6; }
.lesetekst h3 { font-size: 1.1rem; margin: 1.75rem 0 .4rem; }
.lesetekst .tabell { margin-bottom: 1.5rem; }
.lesetekst .tabell td:first-child { width: 14rem; font-weight: 600; }

/* `> tekst` på om-sida: kildesidene hadde «Bli medlem» og slagordet i hver
   sin fargede boks. Én boks i MJF-blått gjør samme jobben. */
.lesetekst .framhevet {
  background: var(--mjf-100);
  border-left: 4px solid var(--mjf);
  padding: .8rem 1rem;
}

/* --- Om MJ-bladet -------------------------------------------------------- */

/* Teksten til venstre i resten av bredden, forsida på siste nummer til høyre.
   Under 820 px kommer forsida etter teksten, mindre — den er pynt, ikke
   innhold. */
.omside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  gap: 1.5rem 3rem;
  align-items: start;
}
.omside__hode {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem;
  margin: 0 0 1rem;
}
.omside__hode h1 { margin: 0; }
.omside__tekst > :last-child { margin-bottom: 0; }

.omside__siste { margin: .5rem 0 0; position: sticky; top: 1.5rem; }
.omside__siste img {
  display: block; width: 100%; height: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 0, 0, .10);
}
.omside__siste figcaption { margin-top: .6rem; font-size: .9rem; color: var(--dempet); }

@media (max-width: 820px) {
  .omside { grid-template-columns: minmax(0, 1fr); }
  .omside__siste { position: static; width: 10rem; }
}

/* Redigeringa: feltet til venstre, sida slik den blir til høyre. Visningen
   blir stående når man ruller, med sin egen rullefelt — den er like lang som
   sida, og Lagre skal ikke forsvinne bak den. Se om-rediger.php. */
.omred {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.omred textarea { height: 34rem; min-height: 12rem; line-height: 1.55; }

.omred__forhand {
  position: sticky; top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  margin: 0;
}
/* Stiplet når det som vises, ikke er det som ligger ute. */
.omred__forhand--ulagret { border: 1px dashed var(--mjf); }
.omred__forhand .lesetekst > :last-child { margin-bottom: 0; }

.omred__hjelp { margin: 1.25rem 0 0; }
.omred__hjelp summary { font-weight: 600; color: var(--mjf-mork); cursor: pointer; }
.omred__hjelp[open] summary { margin-bottom: .6rem; }
.omred__merking td { padding: .3rem .4rem; font-size: .88rem; }
.omred__merking td:first-child { white-space: nowrap; }

@media (max-width: 900px) {
  .omred { grid-template-columns: minmax(0, 1fr); }
  .omred__forhand { position: static; max-height: none; }
}

/* Rett en oppsummering (04.10.2026). Feltet og visningen side om side er
   .omred fra om-sida; visningen bruker sidenes egne klasser
   (.siste__punkter, .artikkel__oppsummering), så den blir lik. */
.oppsred textarea { height: 22rem; }
.oppsred__seo { margin: 1.25rem 0 0; }
.oppsred__konflikt { border: 1px solid var(--feil-kant); }
.oppsred__logg td { vertical-align: top; }
.oppsred__tid { white-space: nowrap; }

/* ⚠️ PÅ TELEFON BLIR HVER RETTELSE EN BLOKK. Fire kolonner med en tekst på
   300 ord i den ene ble 545 px bred på en 375 px skjerm (målt 04.10.2026). */
@media (max-width: 720px) {
  .oppsred__logg thead { display: none; }
  .oppsred__logg, .oppsred__logg tbody, .oppsred__logg tr, .oppsred__logg td { display: block; }
  .oppsred__logg tr { padding: .6rem 0; border-bottom: 1px solid var(--ramme-svak); }
  .oppsred__logg td { padding: .15rem 0; border: 0; }
  .oppsred__logg .oppsred__tid { font-weight: 600; }
}

/* Ord for ord: det som er tatt bort, og det som er lagt til. En småfeil i
   300 ord er ellers umulig å finne igjen. */
.oppsred__endring { line-height: 1.6; }
.oppsred__endring del {
  background: var(--feil-bg); color: var(--feil-kant);
  text-decoration: line-through;
}
.oppsred__endring ins {
  background: var(--ok-bg); color: var(--ok-kant);
  text-decoration: none;
}

kbd {
  font-family: var(--tallfont); font-size: .85em;
  background: var(--bakgrunn);
  border: 1px solid var(--ramme);
  border-bottom-width: 2px;
  padding: .05em .4em;
}

/* --- Forside i utgaveoversikten ------------------------------------------ */

.utgaver .kol-forside { width: 11.5rem; }
.utgaver .kol-forside img {
  width: 100%; display: block;
  border: 1px solid var(--ramme);
  background: var(--flate);
  /* Plassen settes av før bildet kommer, ellers hopper tabellen mens
     129 forsider faller på plass. */
  aspect-ratio: 210 / 297;
  object-fit: cover;
}

/* Skjult for øyet, men lest av skjermlesere. Kolonnen har ingen synlig
   overskrift — bildene sier hva de er — men en tom <th> er en tabell uten
   kolonneoverskrift, og det er noe annet. */
.skjul {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 720px) {
  .utgaver .kol-forside { width: 5rem; }
}

/* --- Brødsmule ----------------------------------------------------------- */

.brodsmule { font-size: .9rem; margin: 0 0 1rem; }

/* Innholdslinja uten lenke: samme rutenett (`.innholdsliste__artikkel`), men
   ikke klikkbar. Brukes når sidebildene ennå ikke er rendret. */
.innholdsliste__ulenket { color: var(--dempet); }

/* --- Temahefter ----------------------------------------------------------
   Kildehenvisningen legger seg på egen linje under tittelen, i kolonne 2, så
   den tre-kolonners rutenettet i innholdslista ikke må endres for de utgavene
   som ikke har den. */

.innholdsliste__kilde {
  grid-column: 2 / -1;
  font-family: var(--tallfont);
  font-size: .78rem;
  color: var(--dempet);
}

.siste__under {
  margin: -.35rem 0 .9rem;
  font-size: 1.02rem;
  color: var(--dempet);
}

@media (max-width: 720px) {
  .innholdsliste__kilde { grid-column: 2; }
}

/* --- Temahefter: administrasjon ------------------------------------------ */

/* Flere skjemaer på én linje uten at hvert av dem tar en hel rad. */
.innebygd { display: inline-block; margin: 0 .35rem .35rem 0; }

.tabell--hefte td { vertical-align: top; }
.tabell--hefte .hjelp { display: block; margin: .15rem 0 0; }

/* Nabovarselet står i artikkelrada, ikke i en boks nederst. */
.hefte__deler {
  display: block;
  margin-top: .3rem;
  font-size: .85rem;
  color: var(--feil-kant);
}

.hefte__knapper button { margin-right: .2rem; }
.hefte__omslag img { border: 1px solid var(--ramme-svak); max-width: 100%; }

.felt--par { display: flex; gap: 1.5rem; }
.felt--par label { display: block; }

/* Plusskolonnen i registeret — bare til stede når et hefte er åpent. */
.kol-hefte { width: 3rem; text-align: center; }

.hefte-svar { margin: .5rem 0 0; font-size: .92rem; }
.hefte-svar[data-slag="feil"] { color: var(--feil-kant); }
.hefte-svar[data-slag="nabo"] { color: #8a5a00; font-weight: 600; }

/* Åpningssida som miniatyr i heftets artikkelliste — ★-valget er et valg
   mellom BILDER, ikke mellom titler. */
.hefte__mini { width: 4.5rem; }
.hefte__mini img {
  display: block;
  width: 58px; height: auto;
  border: 1px solid var(--ramme-svak);
  background: var(--flate);
}

/* Beskjæring av sideintervallet, inne i tabellcella. */
.hefte__sider form { display: flex; align-items: center; gap: .25rem; margin-top: .3rem; }
.hefte__sider input[type="number"] { width: 3.6rem; padding: .2rem .3rem; font-size: .85rem; }
.hefte__sider button { padding: .2rem .45rem; }

/* --- Adminmenyen ---------------------------------------------------------- */

.adminmeny {
  display: flex; flex-wrap: wrap; gap: .25rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--ramme-svak);
}
.adminmeny a {
  padding: .5rem .85rem;
  text-decoration: none;
  color: var(--dempet);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.adminmeny a:hover { color: var(--mjf); background: var(--mjf-100); }
.adminmeny a[aria-current="page"] {
  color: var(--mjf); font-weight: 600;
  border-bottom-color: var(--mjf);
}

/* --- Temahefter, offentlig liste ------------------------------------------ */

.hefteliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.25rem;
}
.heftekort {
  display: flex; gap: 1rem;
  padding: 1rem;
  background: var(--flate);
  border: 1px solid var(--ramme-svak);
  text-decoration: none; color: inherit;
}
.heftekort:hover { border-color: var(--mjf-200); background: var(--mjf-100); }
.heftekort img { width: 7rem; height: auto; align-self: flex-start; }
.heftekort__tekst { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.heftekort__tekst b { font-size: 1.05rem; color: var(--mjf); }
.heftekort__under { font-size: .92rem; color: var(--dempet); }
.heftekort__fakta { font-size: .85rem; color: var(--dempet); margin-top: auto; }

/* Redigerbar tittel og forfatter i heftets artikkelliste. */
.hefte__tekst { min-width: 18rem; }
.hefte__tekst form { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .3rem; }
.hefte__tekst input { width: 100%; padding: .3rem .4rem; font-size: .92rem; }
.hefte__tekst input[name="dforfatter"] { font-size: .85rem; color: var(--dempet); }
.hefte__siderad { display: flex; align-items: center; gap: .25rem; margin-top: .3rem; }
/* Sidelista — «21, 24–25». Bred nok til noen biter uten å presse tittelen. */
.hefte__sider input[type="text"] { width: 7.5rem; padding: .2rem .3rem; font-size: .85rem; }
.hefte__sider .hjelp { max-width: 14rem; font-size: .8rem; }
.hefte__sammen { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin-top: .35rem; }
.hefte__sammen button { font-size: .8rem; padding: .15rem .45rem; }

/* --- Fyllsider ------------------------------------------------------------ */

.fyllrutenett {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.fyllkort { border: 1px solid var(--ramme-svak); background: var(--flate); }
.fyllkort img { display: block; width: 100%; height: auto; }
.fyllkort__under { padding: .6rem .7rem; display: flex; flex-direction: column; gap: .3rem; }

/* Kommandolinjer som skal kopieres. */
.kode {
  background: var(--tekst); color: #e8eaeb;
  padding: .8rem 1rem; overflow-x: auto;
  font-size: .85rem; line-height: 1.6;
}

/* --- Søk med bilder (sok.php) ---------------------------------------------
   Registeret som kort, etter mønster av e-tidning.alltomhobby.se/search:
   ett foto fra artikkelen, kilde, tittel, utdrag og sidetall. Kortene
   fordeles på kolonner av js/register.js — se kommentaren i sok.php. */

.sokefelt {
  display: flex; align-items: stretch;
  background: var(--flate);
  border: 1px solid var(--ramme);
  margin: 0 0 .75rem;
}
.sokefelt:focus-within { outline: 2px solid var(--mjf); outline-offset: -1px; }

.sokefelt input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none;
  font: inherit; font-size: 1.1rem;
  padding: .8rem 1rem;
  color: var(--tekst);
}
.sokefelt input:focus { outline: none; }

.sokefelt__filtre {
  display: flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .92rem;
  background: none; border: 0; border-left: 1px solid var(--ramme-svak);
  color: var(--mjf-mork); padding: 0 .9rem; cursor: pointer;
}
.sokefelt__filtre:hover,
.sokefelt__filtre[aria-expanded="true"] { background: var(--mjf-100); }

.sokefelt__antall {
  min-width: 1.25rem; height: 1.25rem; line-height: 1.25rem;
  border-radius: 1rem; padding: 0 .3rem;
  background: var(--mjf); color: #fff;
  font-size: .75rem; font-weight: 600; text-align: center;
}

.sokefelt__sok {
  font: inherit; font-weight: 600;
  background: var(--mjf); color: #fff;
  border: 0; padding: 0 1.4rem; cursor: pointer;
}
.sokefelt__sok:hover { background: var(--mjf-mork); }

.filterpanel { padding-top: .25rem; padding-bottom: 1rem; margin-bottom: .75rem; }

.treffinfo {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: .25rem 1rem;
  font-size: .92rem; color: var(--dempet);
  margin: .5rem 0 .15rem;
}
.treffinfo__valg { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; }

/* Av/på-bryter. Sporet er et eget element og ikke ::before på en avkryssings-
   boks: Firefox tegner ikke generert innhold på <input>. */
.bryter {
  display: inline-flex; align-items: center; gap: .45rem;
  font: inherit; color: var(--mjf-mork);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.bryter__spor {
  position: relative; flex: none;
  width: 2.1rem; height: 1.2rem; border-radius: 1rem;
  background: #c4c7c9;
  transition: background-color .15s;
}
.bryter__spor::after {
  content: ""; position: absolute; top: .15rem; left: .15rem;
  width: .9rem; height: .9rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .15s;
}
.bryter[aria-checked="true"] .bryter__spor { background: var(--mjf); }
.bryter[aria-checked="true"] .bryter__spor::after { transform: translateX(.9rem); }
.bryter:focus-visible .bryter__spor { outline: 2px solid var(--mjf); outline-offset: 2px; }
.bryter:disabled { cursor: default; opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  .bryter__spor, .bryter__spor::after { transition: none; }
}

.ingen-treff .knapp { margin-left: .5rem; }

.treffinfo__sorter select {
  font: inherit; color: var(--mjf-mork);
  border: 0; background: none; padding: 0 .1rem; cursor: pointer;
}

.treffoverskrift { font-size: 2.1rem; margin: 0 0 1rem; overflow-wrap: anywhere; }

/* Kortene plasseres av skriptet (bredde, left, top), og høyden på rutenettet
   settes når de er lagt ut. Se «Murstein-rutenettet» i js/register.js. */
.rutenett { position: relative; }
.rutenett .treff { position: absolute; top: 0; left: 0; }

/* ⚠️ Plassen til rullefeltet holdes av på søkesida. Ellers kunne sida bli
   stående i en løkke: med rullefelt blir kortene smalere og sida kort nok til
   å slippe det, uten blir de bredere og sida for høy — og slik videre, én gang
   per bilderute. Målt av gjennomgangen 26.09.2026 i et bånd på ~10 px rundt
   vindushøyden, med få treff. */
html:has(.side--sok) { scrollbar-gutter: stable; }

.treff {
  position: relative;
  background: var(--flate);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .08);
  transition: box-shadow .15s;
}
.treff:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 0, 0, .10); }

.treff__lenke { display: block; color: inherit; text-decoration: none; }
.treff__lenke:focus-visible { outline: 3px solid var(--mjf); outline-offset: 2px; }
.treff__lenke:hover .treff__tittel { text-decoration: underline; text-decoration-thickness: 1px; }

/* Flata bildet skal fylle står grå til bildet kommer, så kortet ikke ser
   tomt ut mens det lastes. */
.treff__bilde { background: #e6e7e8; line-height: 0; }
.treff__bilde img { display: block; width: 100%; height: auto; object-fit: cover; }

.treff__tekst { padding: .8rem .9rem .85rem; }

.treff__kilde { font-size: .82rem; line-height: 1.35; color: var(--dempet); }
.treff__kilde span { display: block; }

.treff__tittel {
  font-size: 1.3rem; line-height: 1.15;
  color: var(--tekst);
  margin: .5rem 0 .4rem;
  overflow-wrap: break-word; hyphens: auto;
}
.treff__tittel .del { font-weight: 400; color: var(--dempet); font-size: .85em; }

.treff__utdrag {
  font-size: .9rem; line-height: 1.45; color: #3c3f41;
  margin: 0 0 .55rem;
  overflow-wrap: break-word;
}

/* Søkeordet står i fet skrift, som i forbildet. I tittelen er skrifta alt
   fet, så der får ordet en overstreking med tusj i stedet — ellers synes
   uthevinga ikke i Barlow Condensed. */
.treff mark { background: none; color: inherit; font-weight: 600; }
.treff__tittel mark {
  font-weight: inherit;
  box-shadow: inset 0 -.3em 0 #fbe38a;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.treff__fot {
  font-size: .74rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--mjf);
}

/* Heftevelgeren: plussknappen oppå kortet, ikke inne i lenka. */
.treff__pluss { position: absolute; top: .5rem; right: .5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }

.ingen-treff { text-align: center; color: var(--dempet); padding: 2.5rem 1rem; }

/* Kort eller tabell, øverst ved treffene i begge visningene. Lenker og ikke
   knapper: det er to sider. Se `register_visningsbytte()`. */
.visningsbytte {
  display: inline-flex; flex: none;
  border: 1px solid #c4c7c9; border-radius: .35rem; overflow: hidden;
  background: var(--flate);
}
.visningsbytte__valg {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .65rem;
  font-size: .88rem; line-height: 1.4; color: var(--mjf-mork);
  text-decoration: none;
}
.visningsbytte__valg + .visningsbytte__valg { border-left: 1px solid #c4c7c9; }
.visningsbytte__valg:hover { background: #eef3f6; }
.visningsbytte__valg[aria-current="page"] { background: var(--mjf); color: #fff; }
.visningsbytte__valg:focus-visible { outline: 2px solid var(--mjf); outline-offset: -2px; }
/* Den aktive er alt MJF-blå — en blå ring på blått synes ikke. Innafor
   kanten, for boksen klipper det som står utenfor. */
.visningsbytte__valg[aria-current="page"]:focus-visible { outline-color: #fff; outline-offset: -4px; }
.visningsbytte__valg svg { flex: none; }

/* I tabellvisningen står tellinga og byttet i søkeboksen. */
.sok .treffinfo { align-items: center; margin: .75rem 0 0; }
.sok .treffinfo #antall { margin: 0; }

/* Meldinga et ikke-medlem får ved å trykke «Kort». Se `register_kort_sperre()`. */
.kort-sperre { margin: .75rem 0 0; font-size: .92rem; }

@media (max-width: 640px) {
  .sokefelt input { font-size: 1rem; padding: .7rem .75rem; }
  .sokefelt__etikett { display: none; }
  .sokefelt__filtre { padding: 0 .7rem; }
  .sokefelt__sok { padding: 0 1rem; }
  .treffoverskrift { font-size: 1.6rem; }

  .treff__tekst { padding: .6rem .65rem .7rem; }
  .treff__tittel { font-size: 1.1rem; }

  /* Samme utdrag i en halvt så bred spalte ble åtte-ni linjer, og da er ett
     kort en hel skjermhøyde. Fem linjer holder til å se hva det handler om. */
  .treff__utdrag {
    font-size: .84rem;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; line-clamp: 5;
    overflow: hidden;
  }
  .treff__kilde { font-size: .76rem; }
  .treff__fot { font-size: .68rem; }
}

/* --- Brede kort (09.10.2026) --------------------------------------------- *
   Et framhevet treff over to kolonner, bildet over hele bredden og teksten
   under. Klassen settes og tas av `leggUt()` i js/register.js etter hvor det
   er plass; se «Framheving» og «Murstein-rutenettet» der.

   ⚠️ TO UTDRAG I KORTET, og bare det ene vises: `--smal` (150 tegn) på et
   vanlig kort, `--lang` (300) på et bredt. `display: none` holder det andre
   unna skjermleseren også. Reglene står ETTER telefonblokka over, som gir
   `.treff__utdrag` en egen `display`.                                       */

.treff .treff__utdrag--lang { display: none; }
.treff--stor .treff__utdrag--lang { display: block; }
.treff--stor .treff__utdrag--smal { display: none; }

.treff--stor .treff__tekst { padding: 1rem 1.2rem 1.05rem; }

/* Kilden på én linje — kortet er bredt nok, og det sparer en linje. */
.treff--stor .treff__kilde { font-size: .88rem; }
.treff--stor .treff__kilde span { display: inline; }
.treff--stor .treff__kilde span + span::before { content: " · "; }

/* Halvannen gang den vanlige tittelen (1,3rem). */
.treff--stor .treff__tittel { font-size: 1.95rem; line-height: 1.08; margin: .4rem 0 .5rem; }

.treff--stor .treff__utdrag { font-size: .98rem; line-height: 1.5; margin-bottom: .65rem; }
.treff--stor .treff__fot { font-size: .78rem; }

@media (max-width: 640px) {
  .treff--stor .treff__tekst { padding: .7rem .8rem .8rem; }
  .treff--stor .treff__tittel { font-size: 1.6rem; }
  .treff--stor .treff__kilde { font-size: .8rem; }
  .treff--stor .treff__fot { font-size: .72rem; }

  /* Over hele telefonen: sju linjer, ikke fem — men fortsatt kuttet, så ett
     kort ikke blir en hel skjermhøyde. */
  .treff--stor .treff__utdrag {
    font-size: .9rem;
    -webkit-line-clamp: 7; line-clamp: 7;
  }
  .treff--stor .treff__utdrag--lang { display: -webkit-box; }
}
/* --- Kategorier for temahefter (27.09.2026) ------------------------------ */

.tabell--kategorier td { vertical-align: middle; }
.kategori__navn { display: flex; gap: .4rem; align-items: center; margin: 0; }
.kategori__navn input[type="text"] { width: 16rem; max-width: 100%; padding: .25rem .4rem; }
#kategorier .linjeskjema { margin: 1rem 0 0; }
#kategorier .linjeskjema input[type="text"] { width: 16rem; max-width: 100%; padding: .3rem .45rem; }

/* Temahefter-sida: kategori og rekkefølge øverst, grupper under. Lenker, ikke
   knapper — valget står i adressen. */
.heftevalg {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: .75rem 1.5rem; margin: 0 0 1.25rem;
}
.heftevalg nav { display: flex; flex-wrap: wrap; gap: .4rem; }
.heftevalg a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .7rem; border: 1px solid #c4c7c9; border-radius: 1rem;
  font-size: .9rem; color: var(--mjf-mork); text-decoration: none; background: var(--flate);
}
.heftevalg a:hover { background: #eef3f6; }
.heftevalg a[aria-current="page"] { background: var(--mjf); border-color: var(--mjf); color: #fff; }
.heftevalg a:focus-visible { outline: 2px solid var(--mjf); outline-offset: 2px; }
.heftevalg a span { font-size: .8rem; opacity: .75; }
.heftevalg__rekkefolge a { border-radius: .35rem; }
.heftegruppe { font-size: 1.35rem; margin: 1.75rem 0 .75rem; }
.heftegruppe:first-of-type { margin-top: .5rem; }

/* Temahefter øverst i søket. Mindre enn kortene på Temahefter-sida — de er et
   forslag over treffene, ikke treffene selv. */
.heftetreff { margin: 0 0 1.25rem; }
.heftetreff[hidden] { display: none; }
.heftetreff__overskrift { font-size: 1.1rem; margin: 0 0 .5rem; }
.heftetreff__liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .75rem;
}
.heftetreff__kort {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .7rem; background: var(--flate);
  border: 1px solid var(--ramme-svak); border-left: 4px solid var(--mjf);
  text-decoration: none; color: inherit;
}
.heftetreff__kort:hover { background: var(--mjf-100); border-color: var(--mjf-200); border-left-color: var(--mjf); }
.heftetreff__kort:focus-visible { outline: 3px solid var(--mjf); outline-offset: 2px; }
.heftetreff__kort img { width: 4rem; height: auto; flex: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.heftetreff__tekst { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.heftetreff__type {
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mjf);
}
.heftetreff__tittel { font-size: 1.05rem; color: var(--tekst); overflow-wrap: break-word; }
.heftetreff__tittel mark { background: none; color: inherit; box-shadow: inset 0 -.3em 0 #fbe38a; }
.heftetreff__under { font-size: .88rem; color: var(--dempet); }
.heftetreff__fakta { font-size: .8rem; color: var(--dempet); }
/* Søkeordene i undertittel og utdrag: fet, som på artikkelkortene. */
.heftetreff__under mark, .heftetreff__utdrag mark { background: none; color: inherit; font-weight: 600; }
.heftetreff__utdrag { font-size: .85rem; line-height: 1.4; color: #3c3f41; }

/* --- Spørsmål og svar (03.10.2026) ----------------------------------------
   Snakkebobla i innholdslista, artikkelsida, tråden og redaksjonens kø.
   Bobla står UTENFOR lenka til leseren, så `<li>` blir et rutenett med to
   celler — se utgave.php. */

/* Rutenettet i `<li>` står under Innholdsfortegnelse; bobla er cella `qa`,
   midt på linja. */
.innholdsliste a.innholdsliste__qa {
  grid-area: qa;
  align-self: center;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .45rem .6rem;
  color: var(--dempet);
  font-family: var(--tallfont); font-size: .85rem;
  text-decoration: none;
}
.innholdsliste a.innholdsliste__qa:hover { color: var(--mjf); }
.innholdsliste__qa svg { width: 1.2rem; height: 1.2rem; flex: none; }
.innholdsliste__qa span { color: var(--mjf); font-weight: 600; }
.innhold__hint { margin: -.35rem 0 .6rem; }

h1 .dempet { display: block; font-size: 1.3rem; color: var(--dempet); margin-top: .25rem; }
.artikkel__oppsummering { margin: 0 0 1.25rem; }

/* Toppen av artikkelsida (09.10.2026): brødsmule med «Forrige / Neste», så
   tittel og ingress, oppsummering og knapper — og, for medlemmer, fotoet fra
   artikkelen til høyre. Ingen bredde på teksten (grunnregelen for mjf.no):
   bare fotoet har en kolonne. */
.artikkel__over {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .25rem 1.5rem;
  margin: 0 0 1rem;
}
.artikkel__over .brodsmule { margin: 0; }

.artikkel__bla-liten {
  display: flex; align-items: baseline; gap: .9rem;
  font-size: .9rem;
}
.artikkel__bla-liten .artikkel__bla-teller { color: var(--dempet); }
.artikkel__bla-liten .artikkel__bla-av { color: var(--dempet); opacity: .45; }

/* Uten foto er toppen vanlig flyt, som før. Med foto: to kolonner der fotoet
   går over begge radene. `1fr` på den siste raden tar opp høyden fotoet
   trenger, så oppsummeringen ikke skyves ned. */
.artikkel__topp--bilde {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
  grid-template-rows: auto 1fr;
  grid-template-areas: "hode bilde" "kropp bilde";
  column-gap: 2rem;
  align-items: start;
}
.artikkel__topp--bilde .artikkel__hode  { grid-area: hode; }
.artikkel__topp--bilde .artikkel__kropp { grid-area: kropp; }
.artikkel__bilde { grid-area: bilde; margin: .35rem 0 1.5rem; }
.artikkel__bilde img {
  display: block; width: 100%; height: auto;
  background: var(--ramme-svak);
  border: 1px solid var(--ramme-svak);
}
.artikkel__bilde figcaption { margin-top: .35rem; font-size: .85rem; color: var(--dempet); }

.artikkel__knapper {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin: 0 0 1.25rem;
}
.artikkel__framhev {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  /* Helt til høyre på samme linje som knappene. På smal skjerm bryter det til
     en egen linje, og står da til venstre (se media-blokka under). */
  margin: 0 0 0 auto;
}
.artikkel__framhev-status { margin: -.75rem 0 1.25rem; text-align: right; }

/* «Forrige / Neste artikkel» med titler, under emnene. To kolonner; «Neste» står
   alltid til høyre, også når det ikke finnes noen forrige. */
.artikkel__bla {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem;
  margin: 0 0 1.75rem;
}
.artikkel__bla-lenke {
  display: block;
  background: var(--flate);
  border: 1px solid var(--ramme);
  padding: .7rem .9rem;
  text-decoration: none;
  color: var(--tekst);
}
.artikkel__bla-lenke:hover { border-color: var(--mjf); }
.artikkel__bla-lenke:hover .artikkel__bla-tittel { color: var(--mjf-mork); text-decoration: underline; text-underline-offset: 3px; }
.artikkel__bla-lenke--neste { grid-column: 2; text-align: right; }
.artikkel__bla-hint { display: block; font-size: .85rem; color: var(--dempet); }
.artikkel__bla-tittel {
  display: block;
  font-family: var(--overskrift); font-weight: 600; font-size: 1.2rem; line-height: 1.2;
}

@media (max-width: 720px) {
  .artikkel__topp--bilde {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "hode" "bilde" "kropp";
  }
  .artikkel__bilde { margin: 0 0 1rem; }
  .artikkel__framhev { margin-left: 0; }
  .artikkel__framhev-status { text-align: left; }
  /* ⚠️ HØYKANT FOTO I ÉN KOLONNE HAR EN TAK. Ett av fem kortbilder er høyere enn
     brede (målt 09.10.2026, 11 % på taket 1,3), og over hele bredden ble de
     880 px høye ved 720 px — oppsummeringen startet 1 250 px nede. 32rem er
     nok til at 1,3 ved 375 px (487 px) står uskåret. */
  .artikkel__bilde img { max-height: 32rem; object-fit: cover; }
  .artikkel__bla { grid-template-columns: minmax(0, 1fr); }
  .artikkel__bla-lenke--neste { grid-column: 1; }
}

/* Emnene på artikkelsida (03.10.2026). Navnet til venstre, lenkene som
   merkelapper til høyre — som i registeret, men uten krysset, for her
   fjerner et trykk ingenting: det åpner registeret med emnet valgt. */
.emner {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .5rem 1rem;
  align-items: baseline;
  margin: 0 0 1.75rem;
}
.emner dt { font-size: .85rem; color: var(--dempet); }
.emner dd { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.emne {
  font-size: .85rem;
  background: var(--mjf-100);
  border: 1px solid var(--mjf-200);
  color: var(--mjf-mork);
  padding: .15rem .5rem;
  text-decoration: none;
}
.emne:hover { background: var(--mjf-200); }

@media (max-width: 720px) {
  .emner { grid-template-columns: 1fr; gap: .2rem; }
  .emner dd { margin-bottom: .45rem; }
}

/* Ett spørsmål med svarene. Spørsmålet står i full bredde, svarene rykket inn
   med en strek, så det synes hvem som sier hva uten å lese navnene. */
.qa {
  background: var(--flate);
  border: 1px solid var(--ramme);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.qa__hvem { margin: 0 0 .35rem; font-size: .92rem; }
.qa__tid { color: var(--dempet); margin-left: .35rem; }
.qa__merke {
  display: inline-block; margin-left: .35rem; padding: 0 .4rem;
  font-size: .78rem; background: var(--feil-bg); color: var(--feil-kant);
}
.qa__tekst p { margin: 0 0 .6rem; }
.qa__tekst p:last-child { margin-bottom: 0; }
.qa__svar {
  margin: 1rem 0 0 .75rem;
  padding-left: 1rem;
  border-left: 3px solid var(--mjf-200);
}

.status { font-weight: 600; color: var(--tekst); }
.status--ny        { color: var(--feil-kant); }
.status--publisert { color: var(--ok-kant); }

.knapperad { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .75rem; }
.knapperad form { margin: 0; }

.enkel-liste { margin: .25rem 0 .75rem; padding-left: 1.1rem; }
.enkel-liste li { margin-bottom: .2rem; }

.kort details { margin-top: .9rem; }
.kort details summary { cursor: pointer; color: var(--mjf-mork); font-size: .92rem; }
.faresone summary { color: var(--feil-kant); }

.felt textarea {
  width: 100%;
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  color: var(--tekst);
  border-radius: 0;
  resize: vertical;
}
.felt textarea:focus { outline: 2px solid var(--mjf); outline-offset: -1px; }
form.felt--av { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* Utvalgene i redaksjonens kø. Samme uttrykk som adminmenyen. */
.faner {
  display: flex; flex-wrap: wrap; gap: .25rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--ramme-svak);
}
.faner a {
  padding: .4rem .75rem;
  text-decoration: none; color: var(--dempet);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  font-size: .92rem;
}
.faner a:hover { color: var(--mjf); background: var(--mjf-100); }
.faner a[aria-current="page"] { color: var(--mjf); font-weight: 600; border-bottom-color: var(--mjf); }

.sporsmal-tabell td .dempet { display: block; font-size: .82rem; }

/* Rollebytteren under `php -S`. Stiplet, så den aldri forveksles med noe
   som finnes på serveren. */
.lokal-rolle {
  margin: 2rem 0 0; padding: .6rem .8rem;
  border: 1px dashed var(--feil-kant);
  font-size: .85rem; color: var(--dempet);
}
.lokal-rolle a, .lokal-rolle b { margin-right: .5rem; }

/* ⚠️ Redaksjonens «Spørsmål (3)» er en femte lenke i toppen for en innlogget
   redaktør. På 375 px brøt den ordene inne i naboene («Mine / enheter»,
   «Logg / ut»). Nå går hele lenker over på neste linje i stedet. Målt
   03.10.2026; vanlige medlemmer har tre lenker og får fortsatt én linje. */
@media (max-width: 640px) {
  .topp-hoyre { flex-wrap: wrap; row-gap: .35rem; }
  .topp-hoyre a, .topp-hoyre span, .topp-hoyre button { white-space: nowrap; }
}

/* --- Favoritter (09.10.2026) ----------------------------------------------
   Hjertet på artikkelsida, på kortene i registeret, i modalen og på «Mine
   favoritter». Fyllet følger `aria-pressed`, så skriptet bare snur ett
   attributt. Fargen er den samme røde som feilmeldingene har i kanten. */

.hjerteknapp { display: inline-flex; align-items: center; gap: .4rem; }
.hjerte { fill: none; flex: none; }
.hjerteknapp[aria-pressed="true"] .hjerte { fill: var(--feil-kant); stroke: var(--feil-kant); }

/* På kortet: rundt, nederst til høyre, utenfor lenka — som heftevelgerens
   pluss øverst. Foten får plass til det, så sidetallet ikke havner under. */
.treff__hjerte {
  position: absolute; right: .3rem; bottom: .3rem;
  width: 2.4rem; height: 2.4rem; padding: 0;
  justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--dempet);
  cursor: pointer;
}
.treff__hjerte:hover { background: var(--mjf-100); color: var(--feil-kant); }
.treff__hjerte:focus-visible { outline: 3px solid var(--mjf); outline-offset: 1px; }
.treff__hjerte .hjerte { width: 1.3rem; height: 1.3rem; }
.treff--hjerte .treff__fot { padding-right: 2.4rem; }

/* «Mine favoritter»: hjertet er et skjema rundt knappen. Skjemaet skal ikke
   ta plass; knappen står absolutt mot kortet. */
.treff__hjerte-skjema { margin: 0; }
.favorittliste .treff { position: relative; }
.favorittliste .treff .treff__fot { padding-right: 2.4rem; }

.favorittliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  align-items: start;
  margin: .75rem 0 1.5rem;
}
.favoritter__valg { align-items: center; }
.favoritter__valg .ingress,
.favoritter__valg .linjeskjema { margin: 0; }

.artikkel__favoritt { margin: 0; }

/* --- Bokmerker (19.10.2026) ------------------------------------------------ */

.bokmerkeliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 1rem;
  margin: .75rem 0 1.5rem;
}
.bokmerke-auto h2 { margin-top: 0; }
.bokmerke-auto form { margin: 0; }
.bokmerke-auto__status {
  display: inline-block; margin-left: .4rem; padding: 0 .55rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; vertical-align: .15em;
  background: #e6e7e8; color: var(--dempet);
}
.bokmerke {
  display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; align-items: start;
  background: var(--flate); padding: .8rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .08);
}
.bokmerke__bilde { display: block; background: #e6e7e8; line-height: 0; }
.bokmerke__bilde img { display: block; width: 100%; height: auto; }
.bokmerke__tittel { font-size: 1.25rem; line-height: 1.15; margin: 0 0 .2rem; }
.bokmerke__tittel a { color: inherit; text-decoration: none; }
.bokmerke__tittel a:hover { text-decoration: underline; }
.bokmerke__sted { margin: 0; font-weight: 600; }
.bokmerke__art, .bokmerke__dato { margin: .15rem 0 0; font-size: .92rem; }
.bokmerke__knapper { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .7rem; }
.bokmerke__knapper form { margin: 0; }
@media (max-width: 30rem) {
  .bokmerkeliste { grid-template-columns: 1fr; }
  .bokmerke { grid-template-columns: 5.5rem 1fr; gap: .75rem; }
}

/* Beskjeden når et hjerte ikke ble lagret. Nederst midt på skjermen, over alt. */
.favoritt-melding {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 60;
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
  margin: 0; padding: .6rem 1rem;
  background: var(--tekst); color: #fff;
  font-size: .92rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.favoritt-melding[hidden] { display: none; }

/* --- Statistikk: faner, brede tabeller, sumrader -------------------------- */

/* ⚠️ BREDE TABELLER RULLER SIDEVEIS I KORTET, ikke ut av siden. Måned-tabellen har ni kolonner:
   målt på 375 px var den 530 px mot et kort på 341, og hele siden ble lagt ut 568 px bred og
   zoomet ut. «Per utgave» og «Per medlem» hadde det samme før (473 og 414 px) — ingen regel
   stoppet det. `tabindex="0"` i markupen gir tastaturet fokus på rullefeltet. Ingen max-width
   her: den vanlige regelen er hele bredden. */
.tabellrull { overflow-x: auto; }
.tabellrull:focus-visible { outline: 2px solid var(--mjf); outline-offset: 2px; }

/* Søyle der det står flere tall: `.soylefelt` alene tar 40 % og presser overskriftene sammen. */
.soylefelt.smal { width: 12%; min-width: 3.5rem; }

/* Sumrad. Ligger i <tfoot>, så js/tabellsortering.js (som bare flytter <tbody>-radene) lar den stå. */
.tabell tfoot th,
.tabell tfoot td { font-weight: 600; border-top: 2px solid var(--ramme); border-bottom: 0; }

/* Tall brekkes aldri midt i («10 / 279»): kolonnen blir bredere og tabellen ruller. */
.tabellrull .tall { white-space: nowrap; }

/* Meldinger med en <details> (Statistikk: utelatelse og slettefrist). Korte over fanene, resten bak «mer». */
.melding details { margin-top: .35rem; }
.melding summary { cursor: pointer; color: var(--mjf-mork); font-size: .92rem; }
.melding details[open] summary { margin-bottom: .35rem; }

/* --- Kom i gang (kom-i-gang.php, js/kom-i-gang.js) ------------------------ */

/* Alle trinnene ligger i HTML-en. Uten skriptet står de under hverandre; med
   skriptet skjuler det alle utenom ett (hidden-attributtet) og legger
   Forrige/Neste under dem. Ingen smal kolonne: grunnregelen for mjf.no, så
   bare .side begrenser bredden. Samme mønster som auksjon.mjf.no. */

.kig-innhold ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.5rem;
  padding: 0;
}

.kig-innhold a {
  display: block;
  padding: .4rem .85rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  font-family: var(--overskrift);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
}

.kig-innhold a:hover { background: var(--mjf-100); }
.kig-innhold a.valgt { background: var(--mjf); border-color: var(--mjf); color: #fff; }

.kig-steg {
  background: var(--flate);
  border: 1px solid var(--ramme);
  padding: 1.75rem 2rem;
  margin: 0 0 1.5rem;
}

.kig-steg[hidden] { display: none; }

.kig-steg h2 {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin: 0 0 1rem;
}

.kig-nr {
  min-width: 2.3rem;
  padding: 0 .55rem;
  background: var(--mjf);
  color: #fff;
  text-align: center;
}

.kig-steg h3 { margin: 0 0 .5rem; font-size: 1.5rem; color: var(--mjf-mork); }

.kig-rad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}

.kig-boks {
  background: var(--bakgrunn);
  border: 1px solid var(--ramme-svak);
  padding: 1.25rem 1.4rem;
}

.kig-boks > :last-child { margin-bottom: 0; }

.kig-stort {
  margin: 0 0 .35rem;
  font-family: var(--overskrift);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--mjf-mork);
}

.kig-liste { margin: 0; padding-left: 1.25rem; }
.kig-liste li + li { margin-top: .4rem; }

.kig-piller {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 .85rem;
  padding: 0;
  list-style: none;
}

.kig-piller li { padding: .3rem .8rem; background: var(--mjf-100); color: var(--mjf-mork); font-weight: 600; }

.kig-merk {
  margin: 1.25rem 0 0;
  padding: .9rem 1.2rem;
  background: var(--mjf-100);
  color: var(--mjf-mork);
  font-weight: 600;
}

.kig-handling { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }

/* Illustrasjonene: eksempeldata, ikke skjermbilder. Stiplet ramme og bildetekst
   sier det. */
.kig-mock {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.25rem;
  margin: 1.5rem 0 .5rem;
  padding: 1.25rem;
  background: var(--bakgrunn);
  border: 1px dashed var(--ramme);
}

.kig-mock-bilde {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 13rem;
  background: #cfd4d7;
  color: #3d4144;
  font-weight: 600;
}

.kig-mock-bilde img { display: block; width: 100%; height: auto; }
.kig-mock-meta { margin: .1rem 0 0 !important; color: var(--dempet); }
.kig-mock-kort { background: var(--flate); padding: 1rem 1.25rem; }
.kig-mock-kort p { margin: 0; }
.kig-mock-tittel { font-family: var(--overskrift); font-size: 1.6rem; font-weight: 600; line-height: 1.15; color: var(--mjf-hover); }
.kig-mock-liten { margin-top: .6rem !important; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dempet); }
.kig-mock-tekst { color: var(--tekst); }
.kig-mock-rad { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; border-bottom: 1px solid var(--ramme-svak); }
.kig-mock-skjema { display: flex; gap: .5rem; margin-top: .8rem; }
.kig-mock-felt { flex: 1; padding: .4rem .7rem; border: 1px solid var(--dempet); background: var(--flate); color: var(--dempet); }
.kig-mock-knapp { padding: .4rem 1rem; background: var(--mjf); color: #fff; font-weight: 600; }
.kig-bildetekst { margin: 0; font-size: .9rem; color: var(--dempet); }

.kig-mock--sok { display: block; }
.kig-mock-sok { display: flex; gap: .5rem; margin-bottom: 1rem; }
.kig-mock-treff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.kig-mock-kortet { background: var(--flate); border: 1px solid var(--ramme-svak); padding: .75rem; }
.kig-mock-kortet p { margin: 0; }
.kig-mock-kortet .kig-mock-liten { margin-top: .35rem !important; }

/* Kontrollene lages av js/kom-i-gang.js og finnes ikke uten det. */
.kig-styring {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.5rem;
}

.kig-status { margin: 0; color: var(--dempet); }

.kig-knapp {
  display: inline-block;
  padding: .6rem 1.35rem;
  border: 1px solid var(--mjf);
  background: var(--mjf);
  color: #fff;
  font-family: var(--overskrift);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.kig-knapp:hover { background: var(--mjf-hover); border-color: var(--mjf-hover); color: #fff; }
.kig-knapp.tom { background: transparent; color: var(--mjf-mork); }
.kig-knapp.tom:hover { background: var(--mjf-100); color: var(--mjf-hover); }

.kig-knapp[disabled] {
  background: var(--bakgrunn);
  border-color: var(--ramme);
  color: var(--dempet);
  cursor: default;
}

@media (max-width: 640px) {
  .kig-steg { padding: 1.25rem; }
  .kig-mock { grid-template-columns: 1fr; }
  .kig-mock-treff { grid-template-columns: 1fr; }
  .kig-stort { font-size: 2.2rem; }
}