/* ==========================================================================
   Galleriene (1. oktober 2026): Simons side (galleri.html) og vår side i
   adminpanelet (Til vurdering, Gallerier). Fasiten er prøven i
   docs/prove-leveranse-simon/index.html, Lodd retning B.

   Alle klassene har forstavelsen gl-, så ingenting her kan kollidere med
   nordiva.css (låst) eller tema.css. Fargene, skriftene og luften er Lodds
   tokens (lodd-tokens.css). De få nye målene står som tokens rett under,
   og er foreslått flyttet til lodd-tokens.css i OS-et.
   ========================================================================== */

:root {
  --gl-omslag: 40px;
  --gl-omslag-kort: 150px;
  --gl-plakat-minst: 180px;
  --gl-merking: 320px;
  --gl-hjerte: 32px;
  --gl-avkryss: 20px;
  --gl-spiller-h: 360px;
  --gl-spiller-h-liten: 220px;
  --gl-kort-minst: 260px;
  --gl-knapp-h: 36px;
  --gl-rad-h: 52px;
  --gl-person: 28px;
  --gl-person-liten: 24px;
  --gl-ring: 44px;
  --gl-side: 1080px;
  --gl-plakat-a: linear-gradient(160deg, #C9D3E8, #6C7BA5);
  --gl-plakat-b: linear-gradient(160deg, #E8D8C9, #A5806C);
  --gl-plakat-c: linear-gradient(160deg, #CFE6D6, #5F9C74);
  --gl-plakat-d: linear-gradient(160deg, #E4E4E8, #9A9AA6);
}
[data-tema="mork"] {
  --gl-plakat-a: linear-gradient(160deg, #3A4770, #1B2340);
  --gl-plakat-b: linear-gradient(160deg, #6A5344, #2E2420);
  --gl-plakat-c: linear-gradient(160deg, #2E5A40, #16301F);
  --gl-plakat-d: linear-gradient(160deg, #3B3F52, #1F2230);
}

.gl-rot { font-family: var(--font-ui); font-size: var(--t-4); line-height: var(--t-4-h); color: var(--ink); }
:where(.gl-rot) :where(button, input, textarea) { font-family: inherit; color: inherit; }
:where(.gl-rot) button { cursor: pointer; }
.gl-rot :focus-visible { outline: none; box-shadow: var(--fokus); }
.gl-i { width: var(--ikon); height: var(--ikon); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.gl-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- skallet på Simons side ---- */
.gl-skall { min-height: 100vh; min-height: 100dvh; background: var(--paper); }
.gl-topp { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--s-3); height: var(--topplinje); padding: 0 var(--s-5); background: var(--paper); border-bottom: 1px solid var(--line); }
.gl-logo { display: inline-flex; align-items: center; gap: var(--s-3); font-weight: 600; font-size: var(--t-4); }
.gl-logo img { height: var(--s-6); width: auto; }
.gl-logo small { font-family: var(--font-mono); font-size: var(--t-1); line-height: var(--t-1-h); color: var(--ink-3); font-weight: 400; letter-spacing: .08em; }
.gl-topp .gl-hoyre { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); position: relative; }
.gl-ikonknapp { width: var(--gl-knapp-h); height: var(--gl-knapp-h); border-radius: var(--r-2); border: 0; background: none; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; }
@media (hover: hover) { .gl-ikonknapp:hover { background: var(--flate-3); color: var(--ink); } }
.gl-kontomeny { position: absolute; top: calc(100% + var(--s-2)); right: 0; min-width: 200px; padding: var(--s-2); background: var(--flate); border-radius: var(--r-3); box-shadow: var(--over); display: flex; flex-direction: column; gap: var(--s-1); }
.gl-kontomeny p { margin: 0; padding: var(--s-3) var(--s-4); font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-3); }
.gl-kontomeny button { text-align: left; border: 0; background: none; padding: 0 var(--s-4); min-height: var(--gl-knapp-h); border-radius: var(--r-2); font-size: var(--t-3); }
@media (hover: hover) { .gl-kontomeny button:hover { background: var(--flate-2); } }
.gl-person { width: var(--gl-person); height: var(--gl-person); border-radius: 50%; background: var(--brand-svak); color: var(--brand-tekst); display: inline-grid; place-items: center; font-size: var(--t-2); line-height: 1; font-weight: 600; flex: 0 0 auto; }
.gl-person.p1 { background: var(--gronn-svak); color: var(--gronn); }
.gl-person.p2 { background: var(--amber-svak); color: var(--amber); }
.gl-person.liten { width: var(--gl-person-liten); height: var(--gl-person-liten); font-size: var(--t-1); }

/* ---- sida ---- */
.gl-side { padding: var(--s-6) var(--s-7) var(--s-8); max-width: var(--gl-side); margin: 0 auto; }
.gl-i-admin .gl-side { padding: 0; max-width: none; }
.gl-sidetopp { display: flex; align-items: flex-start; gap: var(--s-5); margin-bottom: var(--s-5); flex-wrap: wrap; }
.gl-sidetopp > div:first-child { flex: 1; min-width: 0; }
.gl-handlinger { display: flex; gap: var(--s-3); flex-wrap: wrap; flex: 0 0 auto; }
.gl-rot h1 { margin: 0; font-size: var(--t-7); line-height: var(--t-7-h); font-weight: 600; letter-spacing: -.01em; }
.gl-rot h2.gl-tittel { margin: 0; font-size: var(--t-6); line-height: var(--t-6-h); font-weight: 600; }
.gl-ingress { margin: var(--s-2) 0 0; color: var(--ink-3); font-size: var(--t-4); line-height: var(--t-4-h); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.gl-ingress .gl-mono { color: var(--ink); }
.gl-brod { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-3); margin-bottom: var(--s-3); min-width: 0; }
.gl-brod button { border: 0; background: none; padding: 0; color: inherit; font-size: inherit; min-height: var(--gl-knapp-h); }
@media (hover: hover) { .gl-brod button:hover { color: var(--ink); } }
.gl-brod span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-brod .gl-i { --ikon: 14px; }

/* ---- knapper, kort, piller, faner ---- */
.gl-knapp { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: var(--gl-knapp-h); padding: 0 var(--s-5); border-radius: var(--r-2); border: 1px solid transparent; font-size: var(--t-3); line-height: var(--t-3-h); font-weight: 500; background: var(--brand); color: var(--brand-blekk); white-space: nowrap; text-decoration: none; transition: transform var(--tid-2) var(--kurve), background var(--tid-2) var(--kurve); }
.gl-knapp:active { transform: scale(.97); }
.gl-knapp[disabled] { opacity: .5; cursor: not-allowed; }
.gl-knapp.rolig { background: var(--flate); color: var(--ink); box-shadow: var(--over-lett); }
.gl-knapp.naken { background: none; color: var(--ink-2); }
@media (hover: hover) { .gl-knapp.naken:hover, .gl-knapp.rolig:hover { background: var(--flate-3); } .gl-knapp:not(.rolig):not(.naken):hover { background: var(--brand-hover); } }
.gl-knapp .gl-i { --ikon: 16px; }
.gl-knapp.fare { color: var(--rod); }
.gl-kort { background: var(--flate); border: 1px solid var(--kort-strek); border-radius: var(--r-3); box-shadow: var(--over-lett); }
.gl-bolk { margin-top: var(--s-6); }
.gl-bolkhode { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5) var(--s-3); flex-wrap: wrap; }
.gl-bolkhode h2 { margin: 0; font-size: var(--t-5); line-height: var(--t-5-h); font-weight: 600; }
.gl-bolkhode .gl-antall { font-family: var(--font-mono); font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-3); }
.gl-pille { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 22px; padding: 0 var(--s-3); border-radius: 6px; font-size: var(--t-2); line-height: var(--t-2-h); font-weight: 500; white-space: nowrap; background: var(--flate-3); color: var(--ink-2); }
.gl-pille.mono { font-family: var(--font-mono); font-weight: 400; }
.gl-pille.amber { background: var(--amber-svak); color: var(--amber); }
.gl-pille.gronn { background: var(--gronn-svak); color: var(--gronn); }
.gl-pille.rod { background: var(--rod-svak); color: var(--rod); }
.gl-pille.brand { background: var(--brand-svak); color: var(--brand-tekst); }
/* Blått på blått-svakt holder ikke 4,5 i mørkt; teksten blir lys der. */
[data-tema="mork"] .gl-pille.brand { color: var(--ink); }
.gl-pille .gl-i { --ikon: 12px; }
.gl-faner { display: flex; gap: var(--s-5); margin: 0 0 var(--s-5); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.gl-faner::-webkit-scrollbar { display: none; }
.gl-fane { font-size: var(--t-4); line-height: var(--t-4-h); display: inline-flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; min-height: var(--menypunkt); padding: 0; margin-bottom: -1px; border: 0; border-bottom: var(--fane-strek) solid transparent; background: none; color: var(--ink-3); white-space: nowrap; }
.gl-fane[aria-selected="true"] { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
@media (hover: hover) { .gl-fane:hover { color: var(--ink); } }
.gl-tall { font-family: var(--font-mono); font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); min-width: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--flate-3); }

/* ---- gallerilista ---- */
.gl-gallerier { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--gl-kort-minst), 1fr)); gap: var(--s-5); }
.gl-galleri-kort { display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; transition: transform var(--tid-2) var(--kurve), box-shadow var(--tid-2) var(--kurve); }
@media (hover: hover) { .gl-galleri-kort:hover { transform: translateY(-2px); box-shadow: var(--over); } }
.gl-galleri-kort .gl-bilde { height: var(--gl-omslag-kort); background: var(--gl-plakat-a) center / cover no-repeat; position: relative; width: 100%; }
.gl-galleri-kort .gl-bilde .gl-pille { position: absolute; top: var(--s-3); left: var(--s-3); }
.gl-galleri-kort .gl-tekst { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); width: 100%; }
.gl-galleri-kort .gl-navn { font-size: var(--t-4); font-weight: 500; line-height: var(--t-4-h); }
.gl-galleri-kort .gl-under { font-size: var(--t-3); color: var(--ink-3); line-height: var(--t-3-h); }
.gl-fot { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.gl-fot .gl-tid { margin-left: auto; }
.gl-tid { font-family: var(--font-mono); font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); white-space: nowrap; }
.gl-nytt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); min-height: 240px; border: 1px dashed var(--line-3); border-radius: var(--r-3); background: none; color: var(--ink-3); padding: var(--s-6); font-size: var(--t-4); }
@media (hover: hover) { .gl-nytt:hover { background: var(--flate); color: var(--ink); } }
.gl-ring { width: var(--gl-ring); height: var(--gl-ring); border-radius: 50%; background: var(--brand-svak); color: var(--brand-tekst); display: grid; place-items: center; --ikon: 22px; flex: 0 0 auto; }

/* ---- rader (vår side) ---- */
.gl-liste { display: flex; flex-direction: column; padding: 0 var(--s-2) var(--s-2); }
.gl-rad { display: flex; align-items: center; gap: var(--s-4); min-height: var(--gl-rad-h); padding: var(--s-3) var(--s-4); border-radius: var(--r-2); border: 0; border-top: 1px solid transparent; background: none; width: 100%; text-align: left; font-size: var(--t-4); }
.gl-liste .gl-rad + .gl-rad { border-top-color: var(--line); }
@media (hover: hover) { .gl-rad:hover { background: var(--flate-2); } }
.gl-rad .gl-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gl-rad .gl-tittelrad { font-size: var(--t-4); font-weight: 500; line-height: var(--t-4-h); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-rad .gl-under { font-size: var(--t-3); color: var(--ink-3); line-height: var(--t-3-h); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-rad .gl-hoyre { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.gl-omslag { width: var(--gl-omslag); height: var(--gl-omslag); border-radius: var(--r-2); background: var(--gl-plakat-a) center / cover no-repeat; flex: 0 0 auto; }
.gl-tom { padding: var(--s-6) var(--s-5); color: var(--ink-3); font-size: var(--t-4); line-height: var(--t-4-h); margin: 0; }

/* ---- opplasting ---- */
.gl-slipp { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5); border: 1px dashed var(--line-3); border-radius: var(--r-3); background: var(--flate); margin-bottom: var(--s-5); transition: border-color var(--tid-2) var(--kurve), background var(--tid-2) var(--kurve); }
.gl-slipp.over { border-color: var(--brand-tekst); background: var(--brand-svak); }
.gl-slipp .gl-tekst { flex: 1; min-width: 0; }
.gl-slipp h3 { margin: 0; font-size: var(--t-4); font-weight: 600; line-height: var(--t-4-h); }
.gl-slipp p { margin: var(--s-1) 0 0; font-size: var(--t-3); color: var(--ink-3); line-height: var(--t-3-h); }
.gl-oppl { margin-bottom: var(--s-5); }
.gl-samlet { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-3); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.gl-samlet b { color: var(--ink); font-weight: 500; }
.gl-samlet .gl-mono { color: var(--ink); }
.gl-fil { display: grid; grid-template-columns: var(--gl-omslag) 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); }
.gl-samlet + .gl-fil { border-top: 0; }
.gl-fil .gl-navn { font-size: var(--t-3); font-weight: 500; line-height: var(--t-3-h); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-fil .gl-meta { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); margin-top: var(--s-1); flex-wrap: wrap; }
.gl-fil .gl-meta .gl-mono { color: var(--ink-2); }
.gl-strek { height: var(--strek-tynn); background: var(--flate-3); border-radius: 2px; margin-top: var(--s-2); position: relative; overflow: hidden; }
.gl-strek i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left center; transform: scaleX(var(--pst, 0)); background: var(--brand-tekst); border-radius: 2px; transition: transform var(--tid-4) linear; }
.gl-strek.ok i { background: var(--gronn); }
.gl-fil .gl-status { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-2); line-height: var(--t-2-h); font-family: var(--font-mono); color: var(--ink-3); white-space: nowrap; }
.gl-fil .gl-status.ok { color: var(--gronn); }
.gl-fil .gl-plakat-liten { width: var(--gl-omslag); height: var(--gl-omslag); border-radius: var(--r-2); background: var(--gl-plakat-d); display: grid; place-items: center; color: var(--ink-3); }
.gl-fil.stoppet { background: var(--rod-svak); border-top-color: transparent; }
.gl-fil.stoppet .gl-plakat-liten { background: var(--flate); color: var(--rod); }
.gl-fil.stoppet .gl-navn { color: var(--rod); }
.gl-grunn { font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-2); margin-top: var(--s-1); }

/* ---- rutenettet ---- */
.gl-innhold { display: grid; grid-template-columns: 1fr var(--gl-merking); gap: var(--s-5); align-items: start; }
.gl-innhold.uten-panel { grid-template-columns: 1fr; }
.gl-rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--gl-plakat-minst), 1fr)); gap: var(--s-4); }
.gl-flis { position: relative; display: flex; flex-direction: column; overflow: hidden; text-align: left; padding: 0; transition: box-shadow var(--tid-2) var(--kurve), transform var(--tid-2) var(--kurve); }
@media (hover: hover) { .gl-flis:hover { box-shadow: var(--over); } }
.gl-flis.valgt { box-shadow: 0 0 0 2px var(--brand-tekst), var(--over-lett); }
.gl-flis > button.gl-apne { border: 0; padding: 0; background: none; text-align: left; display: flex; flex-direction: column; width: 100%; }
.gl-plakat { position: relative; aspect-ratio: 1 / 1; width: 100%; background: var(--gl-plakat-a) center / cover no-repeat; display: grid; place-items: center; color: rgb(255 255 255 / .9); }
.gl-plakat.b { background-image: var(--gl-plakat-b); }
.gl-plakat.c { background-image: var(--gl-plakat-c); }
.gl-plakat.d { background-image: var(--gl-plakat-d); }
.gl-plakat .gl-spill { width: var(--gl-knapp-h); height: var(--gl-knapp-h); border-radius: 50%; background: rgb(0 0 0 / .35); display: grid; place-items: center; --ikon: 16px; }
.gl-merke { position: absolute; bottom: var(--s-3); font-family: var(--font-mono); font-size: var(--t-1); line-height: var(--t-1-h); background: rgb(0 0 0 / .55); color: #fff; padding: 0 6px; border-radius: 4px; }
.gl-merke.v { left: var(--s-3); }
.gl-merke.h { right: var(--s-3); }
.gl-plakat .gl-pille { position: absolute; top: var(--s-3); left: var(--s-3); }
.gl-hjerte { position: absolute; top: 6px; right: 6px; width: var(--gl-hjerte); height: var(--gl-hjerte); border-radius: 50%; border: 0; background: rgb(0 0 0 / .35); color: #fff; display: grid; place-items: center; --ikon: 16px; z-index: 1; }
.gl-hjerte.paa { background: var(--flate); color: var(--rod); }
.gl-hjerte.paa .gl-i { fill: currentColor; }
.gl-kryss { position: absolute; top: 6px; left: 6px; width: var(--gl-hjerte); height: var(--gl-hjerte); border: 0; background: none; display: grid; place-items: center; z-index: 1; padding: 0; }
.gl-kryss span { width: var(--gl-avkryss); height: var(--gl-avkryss); border-radius: 5px; border: 1.5px solid rgb(255 255 255 / .9); background: rgb(0 0 0 / .3); display: grid; place-items: center; color: #fff; --ikon: 14px; }
.gl-kryss.paa span { background: var(--brand-tekst); border-color: var(--brand-tekst); }
.gl-flis .gl-tekst { padding: var(--s-3) var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); width: 100%; }
.gl-flis .gl-navn { font-size: var(--t-3); font-weight: 500; line-height: var(--t-3-h); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-piller { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.gl-flis .gl-fot { font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); }
.gl-flis .gl-kom { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; --ikon: 14px; }
.gl-les { font-size: var(--t-3); color: var(--ink-3); line-height: var(--t-3-h); margin: var(--s-3) 0 0; }
.gl-vis-erstattede { margin-top: var(--s-3); }

/* ---- panelet med den valgte fila ---- */
.gl-panel { position: sticky; top: var(--s-4); }
.gl-panel .gl-hode { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5) 0; }
.gl-panel .gl-hode h3 { margin: 0; font-size: var(--t-4); font-weight: 600; line-height: var(--t-4-h); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-medie { margin: var(--s-4) var(--s-5) 0; border-radius: var(--r-2); overflow: hidden; background: var(--flate-3); display: grid; place-items: center; }
.gl-medie video, .gl-medie img { display: block; width: 100%; max-height: var(--gl-spiller-h); object-fit: contain; }
.gl-medie.tom { background: var(--gl-plakat-d); aspect-ratio: 16 / 9; color: var(--ink-3); }
.gl-felt { padding: var(--s-4) var(--s-5) 0; }
.gl-lab { display: block; font-size: var(--t-2); line-height: var(--t-2-h); font-weight: 500; color: var(--ink-3); margin-bottom: var(--s-2); letter-spacing: .02em; }
.gl-valg { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-valg button { min-height: 30px; padding: 0 var(--s-3); border-radius: 999px; border: 0; background: var(--flate-2); color: var(--ink-2); font-size: var(--t-3); line-height: var(--t-3-h); font-weight: 500; transition: background var(--tid-2) var(--kurve); }
.gl-valg button[aria-pressed="true"] { background: var(--brand); color: var(--brand-blekk); }
.gl-valg button[disabled] { cursor: default; }
.gl-felt input[type="text"] { width: 100%; border: 0; background: var(--flate-2); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink); min-height: var(--gl-knapp-h); }
.gl-fakta { padding: var(--s-4) var(--s-5) 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); margin: 0; }
.gl-fakta dt { margin: 0; }
.gl-fakta dd { margin: 0; font-family: var(--font-mono); color: var(--ink-2); overflow-wrap: anywhere; }
.gl-panelfot { display: flex; gap: var(--s-3); padding: var(--s-5); flex-wrap: wrap; }
.gl-panelfot .gl-knapp { flex: 1; }
.gl-hint { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4) var(--s-5); font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-2); }
.gl-hint b { font-weight: 500; }

/* ---- aktivitet og kommentarer ---- */
.gl-hendelse, .gl-kommentar { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); font-size: var(--t-3); line-height: var(--t-3-h); }
.gl-bolkhode + .gl-hendelse, .gl-kommentarer > .gl-kommentar:first-child { border-top: 0; }
.gl-hendelse .gl-tekst, .gl-kommentar .gl-tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gl-hendelse b, .gl-kommentar b { font-weight: 500; }
.gl-sitat { color: var(--ink-2); }
.gl-sekund { font-family: var(--font-mono); font-size: var(--t-2); color: var(--brand-tekst); margin-left: 6px; border: 0; background: none; padding: 0; }
.gl-skriv { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) var(--s-5) 0; background: var(--flate-2); border-radius: var(--r-3); padding: 6px 6px 6px var(--s-4); }
.gl-skriv .gl-paa { font-family: var(--font-mono); font-size: var(--t-2); line-height: var(--t-2-h); color: var(--brand-tekst); white-space: nowrap; }
.gl-skriv input { flex: 1; min-width: 0; border: 0; background: none; font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink); padding: var(--s-3) 0; }
.gl-skriv input:focus { box-shadow: none; }
.gl-send { width: var(--gl-knapp-h); height: var(--gl-knapp-h); border-radius: 50%; border: 0; display: inline-grid; place-items: center; background: var(--brand); color: var(--brand-blekk); flex: 0 0 auto; --ikon: 16px; }

/* ---- telefon ---- */
@media (max-width: 900px) {
  .gl-side { padding: var(--s-5) var(--s-5) var(--s-8); }
  .gl-innhold { grid-template-columns: 1fr; }
  .gl-panel { position: static; }
  .gl-rutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .gl-gallerier { grid-template-columns: 1fr; }
  .gl-fil { grid-template-columns: var(--gl-omslag) 1fr; }
  .gl-fil .gl-status { grid-column: 2; }
  .gl-handlinger { flex-basis: 100%; }
  .gl-handlinger .gl-knapp { flex: 1; }
  .gl-slipp { flex-wrap: wrap; }
  .gl-rad { flex-wrap: wrap; row-gap: var(--s-2); }
  .gl-rad .gl-hoyre { flex-basis: 100%; justify-content: flex-start; padding-left: calc(var(--gl-omslag) + var(--s-4)); }
  .gl-knapp, .gl-fane, .gl-valg button, .gl-ikonknapp, .gl-send, .gl-sekund, .gl-brod button { min-height: var(--finger); }
  .gl-ikonknapp, .gl-send { width: var(--finger); height: var(--finger); }
  .gl-hjerte, .gl-kryss { width: var(--finger); height: var(--finger); top: 0; }
  .gl-hjerte { right: 0; }
  .gl-kryss { left: 0; }
  .gl-medie video, .gl-medie img { max-height: var(--gl-spiller-h-liten); }
}
.gl-fil .gl-status .gl-knapp { font-family: var(--font-ui); }