/* ============================================================
   Delt design-system for kiosk.html og dashboard.html.
   Fargeidentiteten er avledet fra den eksakte blåfargen i logoen
   (filer-til-claude-code/OTDKB LOGO transp.png), verifisert ved
   pikselsampling: #0073AA. Se prosjektsamtalen for full tokenplan,
   kontrastberegninger (WCAG) og begrunnelse for typografivalg.

   Ingen bygg-steg i dette repoet (jf. CLAUDE.md) — ren CSS, ingen
   preprosessor. Custom properties erstatter de tidligere separate
   --skog/--bok/--papir-settene som lå inline i hver fil.
   ============================================================ */

/* Inter, selvhostet (web/fonts/) i stedet for Google Fonts CDN — kiosken skal ikke
   avhenge av et ekstra tredjeparts-DNS-oppslag/-domene den ikke trenger, i et
   møterom der nettverksforholdene uansett er utenfor vår kontroll. Google Fonts
   serverer nå Inter som variabel skrift (bekreftet: identisk fil uansett hvilken
   vekt som etterspørres), så to filer (latin + latin-ext) dekker hele det brukte
   vektspennet (400–700, inkl. --vekt-halvfet: 650) via font-weight-intervallet under
   — ingen egne statiske kutt trengs. unicode-range er kopiert fra Googles CSS.
   Hentet fra fonts.gstatic.com (v20) 2026-07-21; ingen lisensproblemer — Inter er
   SIL Open Font License. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Identitet: avledet fra logoens #0073AA ---- */
  --brand-blue: #0073AA;       /* eksakt logofarge — lenker, fokusaksent, merke */
  --brand-blue-dark: #004D70;  /* primærknapper (9.15:1 mot hvitt — trygg margin for eldre øyne/kiosklys) */
  --brand-blue-tint: #EBF5F9;  /* valgt rad / subtil fremheving */
  --ink: #192329;              /* brødtekst — myk nesten-svart med kjølig understone */
  --ink-muted: #5E6D78;        /* sekundærtekst, placeholder, tidsstempler */
  --surface: #F7F9FB;          /* sidebakgrunn — kjølig, ikke krem */
  --kort: #FFFFFF;             /* kort/paneler/input-bakgrunn */
  --linje: #D8E1E7;            /* border — kjølig nøytral, harmonerer med surface/brand */

  /* ---- Semantisk (separat fra identitetspaletten) ---- */
  --feststemt: #8A5A00;      /* bursdagshilsen — varm, dempet gull mot hvit (7.0:1) */
  --feststemt-bg: #FDF4E3;
  --ok: #1F7A62;
  --ok-bg: #E4F3EE;
  --varsel: #BD3528;
  --varsel-bg: #FBEAE8;

  /* ---- Typografi ---- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vekt-normal: 400;
  --vekt-medium: 500;
  --vekt-halvfet: 650;
  --vekt-fet: 700;

  /* ---- Form ---- */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-stor: 26px;   /* glass-kort (Liquid Glass, se under) */

  /* ---- Liquid Glass (2026-07-25) --------------------------------------------
     Lagt til for kiosk.html/selv.html sitt redesign opp mot Apples Liquid Glass-
     designspråk (iOS 26), som skal erstatte Vizito på iPaden ved inngangen.
     ADDITIVT: ingen eksisterende farge-token over er endret -- kontrastvalgene
     der (særlig --brand-blue-dark, 9.15:1) står urørt, se filhodet.

     Ekte Liquid Glass gjør sanntids refraksjon som CSS ikke kan gjenskape. Det
     som faktisk er reproduserbart, og som brukes her: translusent lag med
     backdrop-filter, en lys "spekulær" overkant, og myk diffus skygge.

     VIKTIG BEGRENSNING: glass brukes kun på omsluttende/dekorative lag -- ALDRI
     rett bak brødtekst eller knappetekst, der uforutsigbar bakgrunn ville
     ødelagt den dokumenterte WCAG-kontrasten. Tekstbærende primærflater
     (.btn-hoved m.fl.) forblir solide. */
  --glass-bg: rgba(255, 255, 255, .62);
  --glass-kant: rgba(255, 255, 255, .75);
  --glass-blur: 20px;
  --glass-skygge: 0 10px 30px rgba(25, 35, 41, .10), 0 2px 8px rgba(25, 35, 41, .06);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
.skjult { display: none !important; }

/* ---- Fokusring: obligatorisk på alt interaktivt (kravgulv) ----
   :focus-visible skiller tastatur-/pekerfokus fra museklikk, slik at ringen ikke
   dukker opp ved museklikk men ALLTID ved tastaturnavigasjon. */
a, button, input, select, textarea, [tabindex] { font-family: inherit; }
:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Liquid Glass-komponenter ----
   .glass: translusent flate med spekulær overkant. box-shadow gjør to jobber
   samtidig -- den ytre skyggen løfter flaten fra bakgrunnen, den inset hvite
   linjen øverst gir "glasskanten" (lys der lys ville truffet, mørkere under).
   backdrop-filter er -webkit-prefikset i tillegg: eldre iPad-Safari (kiosken er
   en modell med hjemknapp) støtter den kun med prefiks. */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-kant);
  border-radius: var(--radius-stor);
  box-shadow: var(--glass-skygge), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Kapselknapp -- Liquid Glass sin gjennomgående form. Solid bakgrunn med vilje
   (se token-blokkens begrensning over): teksten skal aldri stå på en gjennom-
   siktig flate. */
.btn-kapsel {
  background: var(--brand-blue-dark); color: #fff;
  font-size: 19px; font-weight: var(--vekt-halvfet);
  padding: 20px 32px; border: none; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 77, 112, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-kapsel:hover { box-shadow: 0 8px 22px rgba(0, 77, 112, .34), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn-kapsel:active { transform: scale(.98); }
.btn-kapsel:disabled { opacity: .5; cursor: not-allowed; transform: none; }
/* Sekundær kapsel: lys flate, mørk tekst -- fortsatt solid, samme begrunnelse. */
.btn-kapsel-lys {
  background: var(--kort); color: var(--brand-blue-dark);
  border: 1.5px solid var(--linje);
  box-shadow: var(--glass-skygge);
}
.btn-kapsel-lys:hover { border-color: var(--brand-blue); }

/* Myk bakgrunnsvask bak glasslagene -- uten noe å blurre ser glass ut som flat
   grå. Rolige, store gradienter i merkefargen; ingen bildefil (kiosken skal ikke
   laste ned dekorasjon den ikke trenger over møteroms-wifi, jf. font-valget). */
.glass-bakgrunn {
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(0, 115, 170, .16), transparent 60%),
    radial-gradient(900px 600px at 92% 4%, rgba(0, 115, 170, .10), transparent 62%),
    radial-gradient(800px 800px at 50% 108%, rgba(0, 77, 112, .10), transparent 60%),
    var(--surface);
  background-attachment: fixed;
}

/* Apples egen tilgjengelighetsbryter (Innstillinger → Tilgjengelighet → Skjerm →
   Reduser gjennomsiktighet). Samme prinsipp som prefers-reduced-motion over:
   effekten skal kunne slås av uten at noe blir uleselig. */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--kort);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--linje);
  }
  .glass-bakgrunn { background: var(--surface); }
}

/* ---- Overskrifter ----
   Ett sans-serif-system (Inter), differensiert på vekt/størrelse i stedet for en
   egen display-skrift — se prosjektsamtalen for begrunnelse (unngår "display-serif
   + sans body"-mønsteret, lar logoens heraldikk bære det tradisjonelle uttrykket). */
h1, h2, h3 {
  font-weight: var(--vekt-fet);
  letter-spacing: -0.01em;
  margin: 0;
}
h2 { font-size: 26px; margin-bottom: 6px; }
.hint { color: var(--ink-muted); font-size: 15px; }

/* ---- Ubetalt girobestilling i selvbetjeningens møteliste ----
   Dempet varselfarge, ikke rød alarm: dette er en påminnelse om noe som gjenstår, ikke en feil
   broren har gjort. Skal skille seg fra .mote-status rett over uten å rope. */
.mote-ubetalt {
  margin-top: 6px; font-size: 14px; line-height: 1.4;
  color: var(--varsel); background: var(--varsel-bg);
  border-radius: var(--radius-sm); padding: 8px 10px;
}

/* ---- Obligatorisk deltakeravgift (mote.avgift_type = 'deltakeravgift', migrasjon 043) ----
   En fast linje øverst i handlekurven, ikke et valg: på et slikt arrangement ER påmeldingen
   kjøpet, så avgiften kan ikke velges bort. Den må likevel STÅ der, ellers ser broren bare
   drikkevarene sine og en sum som er flere hundre kroner høyere enn han kan gjøre rede for.
   Bevisst rolig utforming — dette er en opplysning, ikke en advarsel. Ikke .glass: beløp og
   tekst skal aldri stå på en gjennomsiktig flate, samme kontrastregel som varselboblene. */
.obligatorisk-avgift {
  background: var(--brand-blue-tint); border: 1.5px solid var(--linje);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px;
  font-size: 17px; font-weight: var(--vekt-halvfet); font-variant-numeric: tabular-nums;
}

/* ---- Tall/beløp: den ene bevisste typografiske signaturen ----
   Tabular-nums + halvfet + merkefarge, slik at kronebeløp er det ene som visuelt
   springer ut på et skjermbilde — funksjonelt (rask skanning), ikke dekorativt. */
.tall-hoyre, .tall, .belop {
  font-variant-numeric: tabular-nums;
}

/* ---- Logomerke i header (uendret merke, kun størrelse) ---- */
.merke-logo { height: 40px; width: auto; flex-shrink: 0; }

/* ---- Meldingsbokser ---- */
/* Møtets navn under personnavnet — brukes av både kiosk.html og selv.html, og lå tidligere kun
   i selv.html sin egen <style>. Flyttet hit 2026-07-26 da kioskens statusskjerm også skulle vise
   hvilket arrangement man holder på med. */
.mote-undertekst { color: var(--ink-muted); font-size: 15px; margin-bottom: 22px; }

.feil {
  background: var(--varsel-bg); color: var(--varsel);
  padding: 14px 18px; border-radius: var(--radius-sm); font-size: 16px; margin-bottom: 16px;
}
.melding-ok {
  background: var(--ok-bg); color: var(--ok);
  padding: 14px 18px; border-radius: var(--radius-sm); font-size: 16px; margin-bottom: 16px;
}
/* Bursdagshilsen (bruker 2026-08-05), vist i kiosken og på selvbetjeningssiden på brorens egen dag.
   Egen farge framfor .melding-ok: dette er ikke en kvittering på at noe gikk bra, det er en hilsen,
   og den skal skille seg fra systemets bekreftelser. Kontrasten er kontrollert (7.0:1 mot hvitt),
   samme krav som resten av paletten — teksten skal kunne leses av eldre øyne i kiosklys.
   IKKE .glass: hilsenens tekst skal aldri ligge på en gjennomskinnelig flate, samme regel som
   varselboblene. */
.bursdag {
  background: var(--feststemt-bg); color: var(--feststemt);
  padding: 14px 18px; border-radius: var(--radius-sm);
  font-size: 18px; font-weight: var(--vekt-halvfet); margin-bottom: 16px;
}
/* Testmøte (migrasjon 061). Vises på hver flate der en bror kan registrere seg eller kjøpe noe, og
   i dashbordets møtelister.

   HVORFOR DEN ER SÅ PÅTRENGENDE. Et testmøte ser ellers nøyaktig ut som et ekte — det er hele
   poenget med en demorunde, at look & feel er den samme — og det gjør at det ikke finnes noe annet
   signal enn dette. Feilen den skal hindre er ikke at noen betaler for mye, men at en bror tror
   han har meldt seg på det ekte møtet og lar være å gjøre det igjen.

   Advarselsfargen brukes med vilje, ikke en nøytral. Dette er ikke informasjon på linje med
   møtedatoen; det er en beskjed om at det man ser ikke gjelder. Stripene gjør den gjenkjennelig på
   avstand, slik at den skiller seg fra en feilmelding i samme farge.

   IKKE .glass, samme regel som varselboblene og bursdagshilsenen: tekst som betyr noe skal aldri
   ligge på en gjennomskinnelig flate. */
.testbanner {
  background: repeating-linear-gradient(
    135deg, var(--varsel-bg), var(--varsel-bg) 12px,
    color-mix(in srgb, var(--varsel-bg) 88%, var(--varsel)) 12px,
    color-mix(in srgb, var(--varsel-bg) 88%, var(--varsel)) 24px);
  color: var(--varsel);
  border: 2px solid var(--varsel);
  padding: 12px 18px; border-radius: var(--radius-sm);
  font-size: 16px; font-weight: var(--vekt-halvfet); margin-bottom: 16px;
}
.testbanner .testbanner-forklaring {
  display: block; font-weight: 400; font-size: 15px; margin-top: 4px;
}
/* Kompakt utgave for en rad i en liste (møtevelgeren, «Alle møter», selv.html sin møteliste), der
   det ikke er plass til en hel banner men raden likevel ikke må forveksles med et ekte møte. */
.testmerke {
  display: inline-block; background: var(--varsel); color: #fff;
  padding: 1px 8px; border-radius: 999px;
  font-size: 12px; font-weight: var(--vekt-halvfet); letter-spacing: .04em;
  text-transform: uppercase; vertical-align: middle;
}
@media (prefers-reduced-transparency: reduce) {
  /* Stripene er dekorasjon, ikke informasjon — de fjernes sammen med resten av det visuelle
     støyet, mens rammen og fargen (som faktisk bærer beskjeden) blir stående. */
  .testbanner { background: var(--varsel-bg); }
}

/* Skille mellom løpende arbeid og engangsoppsett i en fane. Finnes fordi SkM-fanen blandet de to:
   giro-oppgjør (ukentlig) sto rett over API-hemmeligheter (én gang på fem år), og rekkefølgen var
   den koden ble skrevet i, ikke den skattmesteren jobber i. */
.seksjon-skille {
  margin: 40px 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--linje);
}
.seksjon-skille h2 {
  font-size: 15px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-muted); margin: 0 0 4px;
}
.seksjon-skille .hint { font-size: 14px; }

/* Nøytral merknad — noe brukeren bør lese, men som verken er en feil eller en bekreftelse.
   Finnes fordi kontoforslagene (SkM) bærer forbehold som «ikke avgjort ennå»: å vise dem som
   .feil ville ropt om noe som bare er verdt å vite, og fått ekte feil til å bety mindre. */
.melding-info {
  background: var(--surface); color: var(--ink); border-left: 4px solid var(--brand-blue);
  padding: 12px 16px; border-radius: var(--radius-sm); font-size: 15px; margin-bottom: 16px;
}

/* Taffelmenyen (migrasjon 053). Vises rett under «Blir du med til taffelet?» i kiosk, selv og
   arrangement — det er der opplysningen har en jobb: den skal hjelpe broderen å bestemme seg.
   Bevisst ikke .melding-info: dette er verken en merknad eller et forbehold, det er kveldens
   meny, og den skal leses som innhold. `white-space: pre-line` fordi intendanten skriver fritt og
   gjerne deler hovedrett og dessert på hver sin linje; da skal linjeskiftet hans overleve. */
.meny-boks {
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 16px; font-size: 16px; line-height: 1.5;
  white-space: pre-line;
}
.meny-boks .meny-tittel {
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-muted); margin-bottom: 6px;
}

/* ---- Flytende varsel (2026-07-25) -------------------
   Kun kiosk.html/selv.html. Problemet det løser: feilmeldinger og varsler ble
   skrevet ØVERST i seksjonen, som er utenfor synsfeltet når broren har scrollet
   ned til betalingsknappene. Verste tilfelle var ikke en vanlig feilmelding,
   men "du har allerede en åpen bestilling"-varselet -- det stiller et SPØRSMÅL
   med to knapper, så et trykk på "Betal med Vipps" så ut som om ingenting
   skjedde, mens valget lå usynlig langt oppe på siden.

   Derfor er dette et fast plassert lag som kan inneholde knapper, ikke bare en
   toast: begge tilfellene trenger å bli sett, og det ene trenger å kunne
   handles på der det står.

   Plassert nederst med vilje. Øverst ville dekket kiosk-headeren (som viser
   hvilket møte man registrerer seg til -- nettopp det vi gjorde mer synlig i
   0.49.0), og nederst er innenfor tommelrekkevidde både på iPad og telefon.
   env(safe-area-inset-bottom) holder den klar av iPhone-ens hjemindikator. */
.varsel-lag {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: min(560px, calc(100vw - 32px));
  z-index: 100;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;                 /* laget selv skal ikke fange trykk ... */
}
.varsel-lag > * { pointer-events: auto; } /* ... men boblene i det skal det */

.varsel-boble {
  background: var(--varsel-bg); color: var(--varsel);
  border: 1.5px solid rgba(0, 0, 0, .08);
  padding: 16px 18px; border-radius: var(--radius);
  font-size: 16px; line-height: 1.45;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .10);
  animation: varsel-inn .22s ease-out;
}
/* Bevisst IKKE .glass: teksten i et varsel skal aldri stå på en gjennomsiktig
   flate. Samme kontrastregel som .btn-kapsel, se Liquid Glass-blokken over. */

.varsel-boble .varsel-knapper {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px;
}
.varsel-boble .varsel-knapper button { flex: 1 1 auto; }

@keyframes varsel-inn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .varsel-boble { animation: none; } }

/* ---- Knapper ---- */
button { font-family: inherit; }
.btn-hoved {
  background: var(--brand-blue-dark); color: #fff; font-size: 17px; font-weight: var(--vekt-halvfet);
  padding: 16px; border: none; border-radius: var(--radius); cursor: pointer; width: 100%;
  transition: background-color .15s ease;
}
.btn-hoved:hover { background: #003A57; }
.btn-hoved:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .btn-hoved { transition: none; } }

.btn-linje {
  background: var(--kort); border: 2px solid var(--linje); color: var(--ink);
  font-size: 15px; font-weight: var(--vekt-halvfet); padding: 12px 20px; border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-linje:hover { border-color: var(--brand-blue); }

.btn-lenke {
  background: none; border: none; color: var(--ink-muted); font-size: 16px; cursor: pointer;
  text-decoration: underline;
}

.btn-topp {
  background: none; border: 1.5px solid rgba(255,255,255,.35); color: #fff;
  padding: 9px 16px; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer;
}
.btn-topp:hover { background: rgba(255,255,255,.12); }

/* ---- Skjema-felt (delt av innlogging, admin-skjema, kiosk-søk) ---- */
input[type=search], input[type=text], input[type=email], input[type=password], input[type=number], select {
  width: 100%; font-size: 16px; padding: 14px 16px; border: 1.5px solid var(--linje);
  border-radius: var(--radius-sm); background: var(--kort); color: var(--ink); outline: none;
  font-family: inherit;
}
input[type=search] { font-size: 22px; padding: 18px 20px; border-radius: var(--radius); }
input:focus-visible, select:focus-visible { border-color: var(--brand-blue); }