/* Tyholt Pizzeria — «papir og tomat»
   ---------------------------------------------------------------------------
   Paletten er hentet fra plakatene: solbleket papir, tomatrødt, basilikum og
   en mørk brun som bunnfarge der noe skal lene seg fram (tavla, betalingen,
   klistrekurven). Fraunces bærer stemmen, Inter bærer teksten, og mono er
   forbeholdt tall som skal leses raskt: nummer, kode, kroner.

   Rekkefølge: tokens → grunn → typografi → felles komponenter → kundeside →
   kvittering → admin → tavla → småsider. Én seksjon per flate, ingen
   selektor som kjemper mot en annen lenger nede.
   -------------------------------------------------------------------------- */

:root {
  /* Flater, fra lysest til mørkest */
  --kvittering: #fbf7ee;   /* inputfelt, kvitteringspapir */
  --papir: #f0e4cc;        /* kort */
  --papir-varm: #eadcbf;   /* notiser, styringsbokser */
  --fersken: #efd1bb;      /* sidebakgrunn */
  --mork: #3d2a1e;         /* tavle, betaling, klistrekurv */
  --morkere: #14100c;

  /* Blekk */
  --blekk: #1e140e;
  --blekk-mild: #5a4838;
  --blekk-svak: #b6a48c;

  /* Aksenter */
  --tomat: #c63a2a;
  --tomat-mork: #a32e20;
  --basilikum: #4f6a2e;
  --honning: #b8863f;
  --korn: #e8be7a;         /* gul som tåler mørk bunn */
  --skinke: #e8a896;

  --linje: rgba(30, 20, 14, .15);
  --linje-sterk: rgba(30, 20, 14, .2);
  --linje-lys: rgba(240, 228, 204, .3);

  --skilt: "Fraunces", "Iowan Old Style", Georgia, serif;
  --brod: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --rund: 16px;
  --rund-liten: 12px;
  --pille: 999px;
}

/* ── Grunn ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fersken);
  color: var(--blekk);
  font-family: var(--brod);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tomat); }
a:hover { color: var(--tomat-mork); }

::selection { background: var(--tomat); color: var(--papir); }

/* Tastaturfokus skal alltid være synlig, også på mørk bunn. */
:focus-visible {
  outline: 3px solid var(--tomat);
  outline-offset: 2px;
  border-radius: 4px;
}
.betaling :focus-visible,
.styringsboks.farlig :focus-visible { outline-color: var(--korn); }

img, svg { max-width: 100%; }

/* ── Typografi ────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--skilt);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.02;
  margin: 0;
}

/* opsz er optisk størrelse: Fraunces blir smalere og strammere jo større den
   settes. Uten dette ser en 76px-overskrift ut som en oppblåst brødtekst. */
h1 { font-size: 2.5rem; font-variation-settings: "opsz" 96, "SOFT" 100; }
h2 { font-size: 2rem;   font-variation-settings: "opsz" 72, "SOFT" 100; }
h3 { font-size: 1.5rem; font-variation-settings: "opsz" 48; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Kursiv Fraunces er stemmen i teksten — bruk den til korte innskudd, aldri
   til noe som skal leses raskt. */
.stemme {
  font-family: var(--skilt);
  font-style: italic;
  font-variation-settings: "opsz" 24;
  color: var(--tomat);
}

/* ── Felles komponenter ───────────────────────────────────────────────── */

.side {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 46px;
  padding: .7rem 1.25rem;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--pille);
  background: var(--kvittering);
  color: var(--blekk);
  font-family: var(--brod);
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.knapp:hover { border-color: var(--tomat); color: var(--tomat); }

.knapp.primar {
  border: none;
  background: var(--tomat);
  color: var(--papir);
  font-family: var(--skilt);
  font-style: italic;
  font-variation-settings: "opsz" 32;
  font-size: 1.15rem;
  min-height: 54px;
}
.knapp.primar:hover { background: var(--tomat-mork); color: var(--papir); }

.knapp.fare { border-color: var(--tomat); color: var(--tomat); }
.knapp.fare:hover { background: var(--tomat); color: var(--papir); }

.knapp.liten { min-height: 40px; padding: .45rem .95rem; font-size: .9rem; }

.knapp .ikon { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

.knapp[disabled] {
  background: var(--blekk-svak);
  border-color: transparent;
  color: var(--kvittering);
  cursor: not-allowed;
  box-shadow: none;
}

/* Skjemaer sendes med ekte POST. `inline` er bare for å la en rad med
   knapper ligge på linje uten at hver form tar full bredde. */
form.inline { display: inline; }

label { display: block; }

.navn-paa-felt {
  display: block;
  margin-bottom: .45rem;
  font-family: var(--skilt);
  font-style: italic;
  font-variation-settings: "opsz" 18;
  font-size: 1.05rem;
}
.navn-paa-felt .valgfritt { color: var(--blekk-mild); font-style: normal; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
  width: 100%;
  height: 58px;
  padding: 0 1rem;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--rund-liten);
  background: var(--kvittering);
  color: var(--blekk);
  font-family: var(--brod);
  font-size: 1.1rem;
}
input:focus { outline: none; border-color: var(--tomat); box-shadow: 0 0 0 3px rgba(198, 58, 42, .18); }

small { display: block; margin-top: .4rem; font-size: .875rem; color: var(--blekk-mild); line-height: 1.45; }

.varsel {
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--rund);
  background: var(--papir-varm);
  border: 1px solid var(--linje);
  font-size: 1rem;
  line-height: 1.5;
}
.varsel.stengt { background: var(--mork); border-color: transparent; color: var(--papir); }
.varsel.feil { border: 1px dashed rgba(198, 58, 42, .55); color: var(--tomat); }

/* ── Kundesida: hodet ─────────────────────────────────────────────────── */

.topp { padding: 2.75rem 0 1.9rem; text-align: center; }

.stedet {
  font-family: var(--skilt);
  font-style: italic;
  font-variation-settings: "opsz" 14;
  color: var(--tomat);
  font-size: 1.05rem;
  margin: 0 0 .85rem;
}

.navn {
  font-size: clamp(3.25rem, 15vw, 4.75rem);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  line-height: .9;
  letter-spacing: -.035em;
  margin: 0;
}
.navn .ord-to { display: block; font-style: italic; color: var(--tomat); }

/* Basilikumbladet erstatter prikken over i-en. Bokstaven er en prikkløs ı, så
   bladet ikke kolliderer med noe. */
.i-med-blad { position: relative; display: inline-block; }
.i-med-blad .blad {
  position: absolute;
  top: -.08em;
  left: 50%;
  width: .3em;
  height: .4em;
  transform: translate(calc(-50% + .05em), 0);
  pointer-events: none;
}

.fakta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.fakta li {
  padding: .55rem 1rem;
  border: 1px solid var(--linje);
  border-radius: var(--pille);
  background: var(--papir);
  font-size: .95rem;
  font-weight: 500;
}
.fakta li:last-child { background: var(--tomat); border-color: transparent; color: var(--papir); font-weight: 600; }

/* ── Kundesida: menyen ────────────────────────────────────────────────── */

.meny > h2 { margin-bottom: .35rem; font-size: 2.5rem; font-variation-settings: "opsz" 96, "SOFT" 100; }
.meny .ingress { margin: 0 0 1.5rem; }

.menyliste { display: flex; flex-direction: column; gap: 1.15rem; margin: 0; padding: 0; list-style: none; }

.menyrett {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.25rem;
  border: 1px solid var(--linje);
  border-radius: 18px;
  background: var(--papir);
}
.menyrett.utsolgt { opacity: .62; }

.rett-hode { display: flex; gap: 1rem; align-items: flex-start; }

.tegning {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 106, 46, .18), rgba(79, 106, 46, 0) 68%);
}
.tegning svg { display: block; width: 100%; height: 100%; }

.rett-tekst { min-width: 0; }

.tittelrad { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }

/* Kodebokstaven er ikke pynt: det er nøyaktig den som blir printet på
   etiketten som havner på pizzaesken. */
.kode {
  padding: .18rem .5rem;
  border-radius: 4px;
  background: var(--blekk);
  color: var(--papir);
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
}

.menyrett h3 { font-size: 1.75rem; font-variation-settings: "opsz" 60; letter-spacing: -.02em; text-wrap: balance; }

.undertittel {
  margin: .5rem 0 0;
  font-family: var(--skilt);
  font-style: italic;
  font-variation-settings: "opsz" 18;
  font-size: 1.05rem;
  color: var(--blekk-mild);
}

.ingredienser { margin: 0; font-size: 1rem; line-height: 1.5; }

.allergener {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 0;
  font-size: .875rem;
  color: var(--blekk-mild);
}
.allergener .merke { font-family: var(--skilt); font-style: italic; }
.allergener .stoff { display: inline-flex; align-items: center; gap: .35rem; }
.allergener .ikon { width: 22px; height: 22px; flex: 0 0 22px; }

.utsolgt-merke {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--linje);
  font-family: var(--skilt);
  font-style: italic;
  font-variation-settings: "opsz" 36;
  font-size: 1.25rem;
  color: var(--tomat);
}

/* Teller rundt et ekte number-felt: virker uten JS, bedre med. */
.antall {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-top: .9rem;
  border-top: 1px solid var(--linje);
}
.antall .merkelapp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.antall button {
  flex: 1;
  height: 62px;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--pille);
  background: var(--kvittering);
  color: var(--blekk);
  font-size: 1.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.antall button:hover { background: var(--tomat); border-color: var(--tomat); color: var(--papir); }
.antall input {
  width: 4rem;
  flex: 0 0 4rem;
  height: 62px;
  padding: 0;
  border: none;
  background: transparent;
  text-align: center;
  font-family: var(--skilt);
  font-variation-settings: "opsz" 60;
  font-size: 2.1rem;
  -moz-appearance: textfield;
}
.antall input:focus { box-shadow: none; border-bottom: 2px solid var(--tomat); border-radius: 0; }
.antall input::-webkit-outer-spin-button,
.antall input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.spor {
  margin: 1.4rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--linje);
  border-radius: 14px;
  background: var(--papir-varm);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--blekk-mild);
}
.spor b { color: var(--blekk); }

/* ── Kundesida: dine opplysninger ─────────────────────────────────────── */

.dine-opplysninger { margin-top: 2.75rem; }
.dine-opplysninger > h2 { margin-bottom: .35rem; font-size: 2.5rem; font-variation-settings: "opsz" 96, "SOFT" 100; }
.dine-opplysninger .ingress { margin: 0 0 1.5rem; }
.dine-opplysninger label { margin-bottom: 1.15rem; }

.betalingslofte {
  margin: 0 0 1.15rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--linje);
  border-radius: 14px;
  background: var(--papir-varm);
  font-size: 1rem;
  line-height: 1.5;
}

.lofte {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 1.15rem;
  padding: 1.25rem;
  border: 1px solid var(--linje-sterk);
  border-radius: 14px;
  background: var(--papir);
  font-size: 1.1rem;
  line-height: 1.35;
  cursor: pointer;
}
.lofte:hover { border-color: var(--tomat); }
.lofte input {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  accent-color: var(--tomat);
  cursor: pointer;
}

.bestill-knapp {
  width: 100%;
  min-height: 70px;
  border: none;
  border-radius: var(--pille);
  background: var(--tomat);
  color: var(--papir);
  font-family: var(--skilt);
  font-style: italic;
  font-variation-settings: "opsz" 32;
  font-size: 1.45rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(198, 58, 42, .24);
  transition: background .15s;
}
.bestill-knapp:hover { background: var(--tomat-mork); }

.maks-merknad { margin: .75rem 0 0; text-align: center; font-size: .95rem; color: var(--blekk-mild); }

/* Klistrekurven følger deg nedover sida så totalen alltid er synlig. Den
   dukker først opp når det faktisk ligger noe i den. */
.kurv {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.15rem calc(.875rem + env(safe-area-inset-bottom));
  background: var(--mork);
  box-shadow: 0 -8px 24px rgba(30, 20, 14, .28);
}
.kurv[hidden] { display: none; }
.kurv .sum { flex: 1; min-width: 0; color: var(--papir); }
.kurv .belop { font-family: var(--skilt); font-variation-settings: "opsz" 60; font-size: 1.6rem; line-height: 1.1; }
.kurv .antall-tekst { font-size: .875rem; opacity: .75; }
.kurv .videre {
  flex: 0 0 auto;
  padding: 1.1rem 1.75rem;
  border-radius: var(--pille);
  background: var(--tomat);
  color: var(--papir);
  text-decoration: none;
  font-family: var(--skilt);
  font-style: italic;
  font-variation-settings: "opsz" 32;
  font-size: 1.3rem;
}
.kurv .videre:hover { background: var(--tomat-mork); color: var(--papir); }

/* Plass til kurven, slik at den aldri dekker sendeknappen. */
.kunde { padding-bottom: 11rem; }

/* ── Kundesida: bunnen ────────────────────────────────────────────────── */

.bunn {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linje);
  text-align: center;
}
.bunn .slagord {
  margin: 0 0 1rem;
  font-family: var(--skilt);
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 100;
  font-size: 1.85rem;
  line-height: 1.1;
  color: var(--tomat);
}
.bunn .kontakt { display: flex; flex-direction: column; gap: .5rem; font-size: .95rem; color: var(--blekk-mild); }
.bunn .kontakt a { text-decoration: none; }
.bunn .adresse { align-self: center; padding-bottom: 2px; border-bottom: 1px solid rgba(30, 20, 14, .25); color: var(--blekk); }

/* ── Kvittering ───────────────────────────────────────────────────────── */

.kvittering-side { padding-top: 2.75rem; }

.takk {
  margin: 0 0 1.6rem;
  font-family: var(--skilt);
  font-variation-settings: "opsz" 36;
  font-size: 1.6rem;
  line-height: 1.25;
}

/* Nummeret, saa stort som det faar lov. Det er det eneste kunden trenger aa
   huske, og det eneste vi roper opp. */
.ditt-nummer {
  margin-bottom: 1.9rem;
  padding: 1.6rem 1.5rem 1.75rem;
  border-radius: var(--rund);
  background: var(--kvittering);
  text-align: center;
  box-shadow: 0 10px 24px -14px rgba(30, 20, 14, .55);
}
.ditt-nummer .merkelapp {
  display: block;
  font-family: var(--skilt);
  font-style: italic;
  font-variation-settings: "opsz" 24;
  font-size: 1rem;
  color: var(--blekk-mild);
}
.ditt-nummer .tallet {
  display: block;
  margin-top: .35rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 5.5rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--morkere);
}

.status-boks {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 1.9rem;
  padding: 1.25rem;
  border: 1px solid var(--linje);
  border-radius: 14px;
  background: var(--papir);
}
.status-boks .lampe {
  width: 16px; height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  background: var(--honning);
  animation: lampe 1.8s ease-in-out infinite;
}
.status-boks .tekst { font-family: var(--skilt); font-variation-settings: "opsz" 36; font-size: 1.5rem; }
.status-boks[data-status="i_produksjon"] .lampe { background: var(--tomat); }
.status-boks[data-status="klar"] .lampe { background: var(--basilikum); animation: none; }
.status-boks[data-status="klar"] { border-color: var(--basilikum); }
.status-boks[data-status="levert"] .lampe,
.status-boks[data-status="forlatt"] .lampe,
.status-boks[data-status="avbrutt"] .lampe { background: var(--blekk-svak); animation: none; }

@keyframes lampe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.betaling {
  padding: 1.6rem 1.5rem;
  border-radius: 18px;
  background: var(--mork);
  color: var(--papir);
}
.betaling h2 { margin-bottom: 1.15rem; font-size: 1.9rem; font-variation-settings: "opsz" 60, "SOFT" 100; }
.betaling .belop { margin: 0; font-family: var(--mono); font-size: 2.75rem; font-weight: 700; line-height: 1; word-spacing: -.28em; }
.betaling .til { margin: .5rem 0 1.4rem; font-size: 1.05rem; opacity: .8; }

.vipps-knapp {
  display: block;
  min-height: 60px;
  margin-bottom: 1.15rem;
  padding: 1rem;
  border-radius: var(--pille);
  background: var(--korn);
  color: var(--morkere);
  text-align: center;
  text-decoration: none;
  font-family: var(--skilt);
  font-style: italic;
  font-variation-settings: "opsz" 32;
  font-size: 1.3rem;
  line-height: 1.6;
}
.vipps-knapp:hover { background: #f2cd8c; color: var(--morkere); }

.melding-hint { margin: 0 0 1.15rem; font-size: 1.05rem; line-height: 1.5; }
.melding-kode {
  padding: .12rem .5rem;
  border-radius: 4px;
  background: var(--papir);
  color: var(--blekk);
  font-family: var(--mono);
  font-weight: 700;
}

.vipps-nummer-linje { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 0; font-size: 1.05rem; }
.vipps-nummer-linje .knapp { border-color: var(--linje-lys); background: transparent; color: var(--papir); }
.vipps-nummer-linje .knapp:hover { background: rgba(240, 228, 204, .14); border-color: var(--linje-lys); color: var(--papir); }

.vis-ved-henting { margin: 1.4rem 0 0; font-size: .95rem; opacity: .75; }

.bestilt { margin-top: 1.9rem; }
.bestilt h2 { margin-bottom: 1rem; font-size: 1.9rem; font-variation-settings: "opsz" 60, "SOFT" 100; }
.bestilt ul { margin: 0; padding: 0; list-style: none; }
.bestilt li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 0;
  border-bottom: 1px dashed rgba(30, 20, 14, .2);
  font-size: 1.05rem;
}
.bestilt li .mono { word-spacing: -.28em; }
.bestilt .antall-kode { word-spacing: normal; margin-right: .4rem; font-size: .9rem; color: var(--blekk-mild); }
.bestilt .total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 1.15rem 0 0;
  font-family: var(--skilt);
  font-variation-settings: "opsz" 60;
  font-size: 1.5rem;
}
.bestilt .total span:last-child { font-style: italic; font-size: 1.85rem; color: var(--tomat); }

.epost-kvittering, .tips {
  margin: 1.9rem 0 0;
  text-align: center;
  font-family: var(--skilt);
  font-style: italic;
  font-variation-settings: "opsz" 24;
  font-size: 1.1rem;
  color: var(--blekk-mild);
  line-height: 1.5;
}
.epost-kvittering b { font-style: normal; color: var(--blekk); }

/* ── Admin ────────────────────────────────────────────────────────────── */

main.admin { max-width: 100rem; padding-top: 2rem; }

.admin-topp {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.15rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--linje);
}
.admin-topp h1 { margin-bottom: .75rem; font-size: 2.75rem; }

.nokkeltall { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.nokkeltall li {
  padding: .45rem .875rem;
  border: 1px solid var(--linje);
  border-radius: var(--pille);
  background: var(--papir);
  font-size: .95rem;
}
.nokkeltall .solgt { background: var(--tomat); border-color: transparent; color: var(--papir); font-weight: 600; }

.admin-topp .hoyre { display: flex; gap: .625rem; }

.printfeil {
  margin-top: 1.4rem;
  background: var(--mork);
  border-color: transparent;
  color: var(--papir);
}
.printfeil h2 { margin-bottom: .875rem; font-size: 1.4rem; font-variation-settings: "opsz" 36; }
.printfeil ul { margin: 0; padding: 0; list-style: none; }
.printfeil li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .875rem;
  padding: .5rem 0;
}
.printfeil .knapp { border-color: var(--linje-lys); background: transparent; color: var(--papir); }
.printfeil .knapp:hover { background: rgba(240, 228, 204, .14); border-color: var(--linje-lys); color: var(--papir); }

.allergen-sjekkliste { margin-top: .75rem; border: 1px dashed rgba(184, 134, 63, .7); }
.allergen-sjekkliste summary { cursor: pointer; font-weight: 600; }
.allergen-sjekkliste ul { margin: .875rem 0 0; padding-left: 1.15rem; }
.allergen-sjekkliste li { margin-bottom: .5rem; }

/* Mobil: kort. Kjøkkenmobilen skal aldri scrolle sidelengs. */
.ordreliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.ordrekort {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--linje);
  border-radius: var(--rund);
  background: var(--papir);
}
.ordrekort.gammel { border-color: rgba(198, 58, 42, .55); }
.ordrekort .nr { font-family: var(--mono); font-weight: 700; font-size: 2.5rem; line-height: 1; }
.ordrekort .navn { font-family: var(--skilt); font-variation-settings: "opsz" 36; font-size: 1.375rem; }
.ordrekort .varer { font-size: 1rem; line-height: 1.5; }
.ordrekort .kode { font-size: .85rem; }

.ordrekort .meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .875rem; }
.ordrekort .meta > span {
  padding: .3rem .7rem;
  border: 1px solid var(--linje);
  border-radius: var(--pille);
  background: var(--kvittering);
}
.ordrekort .betalt-nei { border-color: rgba(198, 58, 42, .5); color: var(--tomat); }
.ordrekort .etikett-feil { background: var(--mork); border-color: transparent; color: var(--papir); }
.ordrekort .gammel-merke { background: var(--tomat); border-color: transparent; color: var(--papir); }

/* Statusfargen sitter på kortet, ikke på hver brikke: én kilde til sannhet. */
.ordrekort[data-status="ny"] .meta > span:first-child { background: var(--kvittering); }
.ordrekort[data-status="i_produksjon"] .meta > span:first-child { background: var(--korn); border-color: transparent; }
.ordrekort[data-status="klar"] .meta > span:first-child { background: var(--basilikum); border-color: transparent; color: var(--papir); }
.ordrekort[data-status="levert"] .meta > span:first-child { background: var(--blekk-svak); border-color: transparent; color: var(--kvittering); }

.handling {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding-top: .875rem;
  border-top: 1px solid var(--linje);
}
.handling { flex-direction: column; }
.handling form { display: contents; }

/* Fast 2x3-tastatur. Rutene ligger i samme rekkefølge uansett hvilken status
   ordren har, sa hånda lærer hvor «Klar til henting» er framfor å lete etter
   den på nytt hver gang lista tegnes om. */
.stegrad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }

/* Fire verktoy, to og to pa mobil. Krysset og soppelboetta star ved siden av
   hverandre og ma vaere lette a skille: det ene rydder, det andre sletter. */
.verktoyrad { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }

.knapp.steg { min-height: 50px; padding: .5rem .55rem; font-size: .9rem; text-align: center; }
.knapp.steg.primar { min-height: 50px; font-size: 1.05rem; }

/* En rute som ikke er lovlig herfra holder plassen, men inviterer ikke. */
.knapp.steg.av {
  border-style: dashed;
  background: transparent;
  color: var(--blekk-svak);
  cursor: default;
}
.knapp.steg.av:hover { border-color: var(--linje-sterk); color: var(--blekk-svak); }

/* «Du står her.» Skal kunne leses, men aldri konkurrere med den røde
   handlingen ved siden av — dette er en opplysning, ikke en knapp. */
.knapp.steg.naa {
  border-style: solid;
  border-color: var(--linje-sterk);
  background: var(--papir-varm);
  color: var(--blekk-mild);
}

.ordretabell { display: none; }

.ingen { margin-top: 2rem; text-align: center; font-family: var(--skilt); font-style: italic; font-size: 1.25rem; color: var(--blekk-mild); }

.styring-tittel { margin: 2.75rem 0 1.15rem; font-size: 2.125rem; }

/* Rutenett som fyller bortover, ikke spalter som fyller nedover: boksene skal
   leses fra venstre mot hoyre slik alt annet paa sida gjor. align-items: start
   er det som hindrer at den hoyeste boksen strekker hele raden — de faar ulik
   underkant i stedet, og det er den riktige byttehandelen. */
.styring {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
  align-items: start;
}

.styringsboks {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem;
  border: 1px solid var(--linje);
  border-radius: var(--rund);
  background: var(--papir-varm);
}
.styringsboks h3 {
  margin: 0;
  font-family: var(--skilt);
  font-style: italic;
  font-variation-settings: "opsz" 36;
  font-size: 1.375rem;
  color: var(--tomat);
}
.styringsboks .naa { margin: 0; font-size: 1.1rem; }
.styringsboks .ko { margin: 0; font-family: var(--mono); font-size: .875rem; color: var(--blekk-mild); }
.styringsboks label { margin: 0; }
.styringsboks input[type="text"],
.styringsboks input[type="email"] { height: 52px; font-size: 1.05rem; }
.styringsboks .knapp { width: 100%; }

.utsolgtliste, .mottakerliste { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.utsolgtliste li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: 1rem; }
.utsolgtliste .knapp { width: auto; min-height: 42px; }

.mottaker {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem;
  border: 1px solid var(--linje);
  border-radius: var(--rund-liten);
  background: var(--kvittering);
  font-size: 1rem;
  cursor: pointer;
}
.mottaker:hover { border-color: var(--tomat); }
.mottaker input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--tomat); }
.mottaker .m-navn { flex: 1; }
.mottaker .m-nummer { font-family: var(--mono); font-size: .875rem; }
.mottaker.valgt { background: var(--tomat); border-color: transparent; color: var(--papir); }
.mottaker.valgt input { accent-color: var(--papir); }

.legg-til-mottaker summary { cursor: pointer; font-size: .95rem; color: var(--blekk-mild); }
.legg-til-mottaker label { margin-top: .625rem; }

#printerstatus { margin: 0; display: flex; align-items: center; gap: .625rem; font-size: 1.1rem; }
#printerstatus::before { content: ""; width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; background: var(--blekk-svak); }
#printerstatus.ok::before { background: var(--basilikum); }
#printerstatus.feil::before { background: var(--honning); }
#printerstatus.laast::before { background: var(--tomat); }

.epost-svar { margin: 0; padding: .7rem .875rem; border-radius: var(--rund-liten); font-size: .95rem; line-height: 1.45; }
.epost-svar.ok { background: var(--basilikum); color: var(--papir); }
.epost-svar.feil { background: var(--tomat); color: var(--papir); }

.styringsboks.farlig { background: var(--mork); border-color: transparent; color: var(--papir); }
.styringsboks.farlig h3 { color: var(--korn); }
.styringsboks.farlig .navn-paa-felt { color: var(--papir); }
.styringsboks.farlig input { border-color: var(--linje-lys); background: rgba(240, 228, 204, .08); color: var(--papir); }
.styringsboks.farlig input:focus { border-color: var(--korn); box-shadow: 0 0 0 3px rgba(232, 190, 122, .2); }
.styringsboks.farlig small { color: rgba(240, 228, 204, .75); }
.styringsboks.farlig .knapp.fare { background: transparent; color: var(--papir); }
.styringsboks.farlig .knapp.fare:hover { background: var(--tomat); }

/* PC: tabell. Flere ordrer i syne samtidig. */
@media (min-width: 60rem) {
  .ordreliste { display: none; }

  .ordretabell { display: table; width: 100%; margin-top: 1.6rem; border-collapse: collapse; }
  .ordretabell th {
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--linje);
    text-align: left;
    font-family: var(--skilt);
    font-style: italic;
    font-weight: 400;
    font-size: 1rem;
    color: var(--tomat);
  }
  .ordretabell td { padding: .875rem .75rem; border-bottom: 1px solid var(--linje); vertical-align: top; }
  .ordretabell .nr { font-family: var(--mono); font-weight: 700; font-size: 1.75rem; line-height: 1; }
  .ordretabell .navn { font-family: var(--skilt); font-variation-settings: "opsz" 24; font-size: 1.15rem; }
  .ordretabell .sum { display: block; margin-top: .25rem; font-size: .875rem; color: var(--blekk-mild); }
  .ordretabell .kode { font-size: .8rem; }
  .ordretabell .gammel-merke {
    display: inline-block;
    margin-top: .3rem;
    padding: .2rem .6rem;
    border-radius: var(--pille);
    background: var(--tomat);
    color: var(--papir);
    font-size: .8rem;
  }
  .ordretabell .status-merke {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: var(--pille);
    background: var(--kvittering);
    border: 1px solid var(--linje);
    font-size: .9rem;
  }
  .ordretabell tr[data-status="i_produksjon"] .status-merke { background: var(--korn); border-color: transparent; }
  .ordretabell tr[data-status="klar"] .status-merke { background: var(--basilikum); border-color: transparent; color: var(--papir); }
  .ordretabell tr[data-status="levert"] .status-merke { background: var(--blekk-svak); border-color: transparent; color: var(--kvittering); }

  .ordretabell .etikett-feil { display: block; margin-top: .25rem; color: var(--tomat); font-size: .85rem; }
  .ordretabell .ordre.gammel { background: rgba(198, 58, 42, .07); }
  .ordretabell .handling { padding-top: 0; border-top: none; gap: .4rem; }
  .ordretabell .stegrad { gap: .4rem; }
  .ordretabell .verktoyrad { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
  .ordretabell .knapp { min-height: 38px; padding: .35rem .7rem; font-size: .85rem; }
  .ordretabell .knapp.steg.primar { min-height: 38px; font-size: .95rem; }
}

/* ── Tavla ────────────────────────────────────────────────────────────── */

/* Tavla staar ute i dagslys fra klokka 15. En moerk skjerm i sol blir et
   speil framfor informasjon, saa her gjelder lys bunn med moerke tall — den
   kombinasjonen taaler mest omgivelseslys.

   --fersken og ikke den lysere --kvittering, med vilje: tavla staar ogsaa
   ute klokka 23, og da skal den ikke lyse opp hele bakgaarden. Moerk tekst
   paa fersken gir 12:1 i kontrast, godt over kravet. */
body.skjerm { background: var(--fersken); color: var(--blekk); }

.skjerm-side {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 2.5rem;
  min-height: 100vh;
  padding: 2.5rem 2rem;
}

.spalte h2 { font-family: var(--skilt); font-style: italic; font-weight: 400; }

.spalte-klar h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.125rem, 5vw, 3.25rem);
  font-variation-settings: "opsz" 96, "SOFT" 100;
  color: var(--tomat);
}

.numre { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.numre li {
  padding: .625rem 1.6rem;
  border-radius: 8px;
  background: var(--mork);
  color: var(--papir);
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(4.5rem, 14vw, 9.375rem);
  line-height: 1;
  animation: mates-ut .45s ease-out;
}

@keyframes mates-ut {
  from { opacity: 0; transform: translateY(-14px) scale(.94); }
  to { opacity: 1; transform: none; }
}

.spalte-arbeid { border-top: 1px solid var(--linje-sterk); padding-top: 2rem; }
.spalte-arbeid h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-variation-settings: "opsz" 48;
  color: var(--blekk-mild);
}

/* Dempet, men fortsatt lesbar fra andre siden av rommet — dette er tallene
   folk leter etter mens de venter. */
.numre-sma {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.25rem);
  line-height: 1;
  color: var(--blekk-mild);
}

.tom { margin: 0; font-family: var(--skilt); font-style: italic; font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--blekk-mild); }
.tom-liten { margin: 0; font-family: var(--mono); font-size: 2rem; color: var(--blekk-svak); }

/* Landskap på TV: klar-spalten får plassen den fortjener.

   Takene her er hoevet kraftig. De gamle (9.375rem / 4.25rem) var satt for
   en laptopskjerm, og paa en 1080p-TV slo de inn lenge foer flata var brukt
   — tallene fylte under en tiendedel av skjermen mens resten stod tom.
   vw-leddet gjoer jobben paa alt som er mindre; taket slipper bare taket
   loes paa det som er stort. */
@media (min-width: 60rem) and (orientation: landscape) {
  .skjerm-side { grid-template-columns: 2fr 1fr; gap: 3rem; align-content: center; }
  .spalte-arbeid { border-top: none; border-left: 1px solid var(--linje-sterk); padding-top: 0; padding-left: 3rem; }
  .numre-sma { flex-direction: column; gap: .875rem; }

  .spalte-klar h2 { margin-bottom: 1.75rem; font-size: clamp(2.5rem, 4.5vw, 5rem); }
  .numre { gap: 1.5rem; }
  .numre li { padding: .5rem 1.4rem; }
  .spalte-arbeid h2 { font-size: clamp(1.5rem, 2.6vw, 2.75rem); }
  .numre-sma { font-size: clamp(2.75rem, 6.5vw, 7.5rem); }
  .tom { font-size: clamp(1.75rem, 3.4vw, 4rem); }

  /* Stoerrelsen maa foelge antallet, ellers faller de siste tallene utenfor
     skjermen — og et nummer ingen ser er verre enn et lite nummer. Testet
     med TRESIFREDE tall, som er det breieste tilfellet: 20 klare ordrer paa
     1080p faar fortsatt plass.

     Retningen er med vilje «lite som utgangspunkt, stort naar det er faa»
     framfor omvendt. Skulle nettleseren i TV-en ikke stoette :has(), blir
     alle reglene under droppet, og da staar vi igjen med den trygge
     stoerrelsen framfor den som klipper. */
  .numre li { font-size: clamp(3.5rem, 6.5vw, 6.5rem); }
  .numre:not(:has(li:nth-child(9))) li { font-size: clamp(4.5rem, 9vw, 9rem); }
  .numre:not(:has(li:nth-child(5))) li { font-size: clamp(6rem, 13vw, 13rem); }
}

/* ── Innlogging, 404 ──────────────────────────────────────────────────── */

.logg-inn { max-width: 26rem; padding-top: 5rem; }
.logg-inn h1 { margin-bottom: .5rem; font-size: 3.25rem; }
.logg-inn .stemme { display: block; margin-bottom: 1.9rem; font-size: 1.1rem; }
.logg-inn label { margin-bottom: 1rem; }
.logg-inn .bestill-knapp { min-height: 64px; font-size: 1.375rem; }
.logg-inn small { margin-top: .875rem; }

.ikke-funnet { max-width: 29rem; padding-top: 5.5rem; text-align: center; }
.ikke-funnet h1 { margin-bottom: 1rem; font-size: clamp(2.375rem, 10vw, 3.625rem); line-height: 1.02; }
.ikke-funnet h1 em { font-style: italic; color: var(--tomat); }
.ikke-funnet p { margin: 0 0 2rem; font-size: 1.15rem; line-height: 1.5; color: var(--blekk-mild); }
.ikke-funnet .knapp.primar { padding: 1.15rem 2.15rem; font-size: 1.3rem; }

/* ── Redusert bevegelse ───────────────────────────────────────────────── */

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

/* ── Rydde og slette ──────────────────────────────────────────────────── */

/* Krysset rydder — det skal se ufarlig ut, for det er det. */
.knapp.kryss { color: var(--blekk-mild); }
.knapp.kryss:hover { border-color: var(--linje-sterk); background: var(--papir-varm); color: var(--blekk); }

/* Soppelboetta sletter for godt. Den skal se ut som det, uten a rope. */
.knapp.slett { border-color: rgba(198, 58, 42, .45); color: var(--tomat); }
.knapp.slett:hover { background: var(--tomat); border-color: transparent; color: var(--papir); }

.bekreft {
  max-width: 26rem;
  padding: 1.6rem;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--rund);
  background: var(--kvittering);
  color: var(--blekk);
}
.bekreft::backdrop { background: rgba(30, 20, 14, .55); }
.bekreft h2 { margin: 0 0 .7rem; font-size: 1.5rem; }
.bekreft p { margin: 0 0 1.4rem; line-height: 1.5; }
.bekreft-knapper { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.bekreft-knapper .knapp { width: 100%; }
.bekreft-knapper .fare { border-color: transparent; background: var(--tomat); color: var(--papir); }
.bekreft-knapper .fare:hover { background: var(--tomat-mork); border-color: transparent; color: var(--papir); }

/* Angrelista. Diskret med vilje — den skal finnes, ikke ta plass. */
.skjulte { margin-top: 1.6rem; }
.skjulte summary { cursor: pointer; font-size: .95rem; color: var(--blekk-mild); }
.skjulte ul { display: flex; flex-direction: column; gap: .5rem; margin: .875rem 0 0; padding: 0; list-style: none; }
.skjulte li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .875rem;
  padding: .625rem .875rem;
  border: 1px dashed var(--linje-sterk);
  border-radius: var(--rund-liten);
  color: var(--blekk-mild);
}
.skjulte .nr { font-family: var(--mono); font-weight: 700; font-size: 1.25rem; color: var(--blekk); }
.skjulte .navn { flex: 1; font-family: var(--skilt); font-variation-settings: "opsz" 24; }
.skjulte .status { font-size: .875rem; }