/* Hamburgermeny og dashbordkort på mobilen.
   Michael 2026-08-13: «liker bedre sånn sidebar hamburgermeny.»

   Fargene er de samme som resten av appen. Blir de ikke det, leses skjermen
   umiddelbart som «feil app» — samme reaksjon Michael hadde på live-siden da
   den var slate-blå mot appens varme brunsvart. */

/* ── Hamburgermeny ─────────────────────────────────────────────────────── */
.meny-btn { font-size: 19px; line-height: 1; }
.topp-tittel { font-weight: 600; letter-spacing: .01em; }
.bar-spacer { flex: 1; }

.meny-bakteppe {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  z-index: 40; animation: menyInn .12s ease-out;
}
.meny {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(76vw, 280px);
  background: #1b1a18; border-right: 1px solid #2d2b28;
  z-index: 41; display: flex; flex-direction: column; gap: 2px;
  padding: calc(env(safe-area-inset-top) + 14px) 10px 14px;
  animation: menySkyv .16s ease-out;
  /* Åtte fanene får plass på 812 px, men ikke på en liten skjerm i
     landskap. Uten dette krympes de i stedet for å kunne blas — samme felle
     som klemte dashbordkortene flate. */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.meny .tab { flex: none; }
.meny .tab {
  display: block; width: 100%; text-align: left;
  padding: 13px 14px; border-radius: 10px; border: 0;
  background: none; color: #e9e6df; font: inherit; font-size: 15px;
}
.meny .tab.active { background: rgba(245, 158, 11, .13); color: #f59e0b; font-weight: 600; }
@keyframes menyInn { from { opacity: 0 } }
@keyframes menySkyv { from { transform: translateX(-100%) } }

/* Skrivefeltet hører til chatten. Står det framme på dashbordet, spiser det
   en fjerdedel av en telefonskjerm til ingen nytte. */
body.dashbord-mode #composer { display: none; }

/* ── Kortene ───────────────────────────────────────────────────────────── */

/* Målt 2026-08-14, og det forklarte begge feilene Michael meldte:
 *
 *   kort 1 ville ha 277 px og fikk 42
 *   kort 2 ville ha 473 px og fikk 71
 *   4795 px innhold presset inn i 812
 *
 * `padding: 10px` her overstyrte `.view` sin toppklarering på 145 px, så
 * innholdet startet BAK den faste toppbaren og idé-innboksen. Og i en
 * flex-kolonne med begrenset høyde krymper barna (flex-shrink er 1 som
 * standard) i stedet for å flyte over — så kortene ble klemt flate, teksten
 * forsvant bak `overflow: hidden`, og det fantes ingenting å bla i.
 *
 * «Menyene mister navn og er ikke mulig å bla» var altså ett problem, ikke to.
 */
#dashbord {
  /* Samme klarering som .view. Skrives ut fordi id slår klasse. */
  padding: calc(env(safe-area-inset-top) + 145px) 10px calc(env(safe-area-inset-bottom) + 78px);
  display: flex; flex-direction: column; gap: 9px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* ── Toppstripe, piller og tallstripe ─────────────────────────────────────
 * Michael 2026-08-14: «forsøk å press så mye som mulig inn på en skjerm og
 * minimalt med blaing, men seff noe er lov.»
 *
 * Fanene som sto her er borte. De delte dashbordet i fem deler man måtte velge
 * mellom, og han var tydelig på at det var feil vei: «litt det samme som før
 * egentlig». Nå vises alt, men mindre. */
.mk-topp { flex: none; display: flex; align-items: center; gap: 11px; padding: 2px 0 4px; }
.mk-klokke {
  font-size: 27px; font-weight: 600; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: #e9e6df;
}
.mk-dato { display: flex; flex-direction: column; gap: 1px; }
.mk-dato b { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.mk-dato span { font-size: 11px; color: #6a6760; }

.mk-piller { flex: none; display: flex; gap: 5px; flex-wrap: wrap; }
.mk-pille {
  display: flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 999px; border: 1px solid #2d2b28; background: #1b1a18;
  font-size: 11px; color: #a8a29a; white-space: nowrap;
}
.mk-pille b { color: #f59e0b; font-variant-numeric: tabular-nums; }
.mk-pille .mk-prikk { width: 6px; height: 6px; margin: 0; }

.mk-tallstripe {
  flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
}
.mk-stripetall {
  display: flex; flex-direction: column; gap: 0; padding: 6px 7px;
  background: #1b1a18; border: 1px solid #2d2b28; border-radius: 9px; min-width: 0;
}
.mk-stripetall b {
  font-size: 15px; font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis;
}
.mk-stripetall span {
  font-size: 8.5px; color: #6a6760; text-transform: uppercase; letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-stripetall .er-gronn { color: #7aad80; }
.mk-stripetall .er-gul { color: #f0a940; }
.mk-stripetall .er-rod { color: #c07060; }

.mk-feil {
  flex: none;
  padding: 9px 12px; border-radius: 9px; font-size: 12.5px;
  background: rgba(192, 112, 96, .12); border: 1px solid #c07060; color: #c07060;
}

/* flex: none er ikke pynt — uten den krymper kortet til 42 px. */
.mk { flex: none; background: #1b1a18; border: 1px solid #2d2b28; border-radius: 13px; overflow: hidden; }
.mk-hode {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-bottom: 1px solid #2d2b28; color: #e9e6df; font-size: 12px;
}
.mk-tittel { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.mk-nokkel {
  margin-left: auto; font-size: 11.5px; color: #9a9488;
  background: #121210; border: 1px solid #2d2b28; border-radius: 999px;
  padding: 3px 9px; white-space: nowrap;
}

/* Samme tak som på PC-en, av samme grunn: «Aktivitet» med logg, idébank og
   research åpne var 3749 px på en 812 px skjerm. Et kort som er lengre enn
   skjermen ruller inni seg selv. */
/* Taket er lavere enn før (62vh). Med sju brikker synlige samtidig bestemmer
   det direkte hvor langt Michael må bla — og «minimalt med blaing» var hele
   bestillingen. En liste som er lengre enn 40 % av skjermen ruller inni seg. */
.mk-kropp {
  padding: 10px 11px;
  max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mk-tom { color: #6a6760; font-size: 13px; margin: 0; }

/* Nå */
.mk-linje { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.mk-prikk { width: 10px; height: 10px; border-radius: 50%; background: #6a6760; flex: none; margin-top: 5px; }
.mk-prikk.er-aktiv { background: #7aad80; box-shadow: 0 0 0 4px rgba(122, 173, 128, .13); }
.mk-linje b { display: block; font-size: 13.5px; }
.mk-linje span { display: block; color: #9a9488; font-size: 12.5px; overflow-wrap: anywhere; }
.mk-linje i { display: block; color: #6a6760; font-size: 11px; font-style: normal; margin-top: 2px; }
.mk-plan2 { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-plan2 li { font-size: 11.5px; color: #6a6760; padding: 2px 0; }
.mk-plan2 li.er-ferdig { color: #7aad80; }
.mk-plan2 li.er-naa { color: #f0a940; font-weight: 600; }
.mk-sist { margin: 6px 0 0; font-size: 11px; color: #6a6760; }
.mk-plan { background: #121210; border: 1px solid #2d2b28; border-radius: 9px; padding: 9px 10px; }
.mk-plan b { display: block; color: #f0a940; font-size: 11.5px; margin-bottom: 3px; }
.mk-plan span { color: #9a9488; font-size: 12.5px; overflow-wrap: anywhere; }

/* Maskin */
.mk-sammendrag { margin: 0 0 10px; color: #9a9488; font-size: 12.5px; }
.mk-rutenett { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-bottom: 10px; }
.mk-tall {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px;
  background: #121210; border: 1px solid #2d2b28; border-radius: 9px; font-size: 12.5px;
}
.mk-tall span { color: #6a6760; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.mk-tall b { margin-left: auto; font-variant-numeric: tabular-nums; }
.mk-tall .er-gronn { color: #7aad80; }
.mk-tall .er-gul { color: #f0a940; }
.mk-tall .er-rod { color: #c07060; }
/* Selve poenget: uten disse er alt over bare tall. */
.mk-valg { border-left: 2px solid #f59e0b; background: #121210; padding: 8px 10px; margin-bottom: 6px; border-radius: 0 9px 9px 0; }
.mk-valg b { display: block; color: #f0a940; font-size: 12.5px; }
.mk-valg span { color: #9a9488; font-size: 11.5px; overflow-wrap: anywhere; }
.mk-lokk { color: #f0a940; font-size: 11.5px; margin: 8px 0 0; }

/* Nivå og XP */
.mk-rang { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 7px; }
.mk-rang b { font-size: 14px; }
.mk-pil { color: #6a6760; }
.mk-nesten { font-size: 12.5px; color: #a8a29a; }
.mk-pst { margin-left: auto; color: #f59e0b; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-anslag { margin: 7px 0 0; font-size: 11.5px; color: #a8a29a; }
.mk-kravhode {
  font-size: 10px; color: #6a6760; text-transform: uppercase;
  letter-spacing: .05em; margin: 9px 0 3px;
}
.mk-linjebar { height: 7px; background: #121210; border-radius: 999px; overflow: hidden; margin-bottom: 9px; }
.mk-linjebar i { display: block; height: 100%; background: #f59e0b; }
.mk-post { display: flex; gap: 8px; font-size: 11.5px; color: #9a9488; padding: 2px 0; }
.mk-post span { flex: 1; }
.mk-post em { color: #6a6760; font-style: normal; }
.mk-post b { color: #7aad80; min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.mk-post.er-minus b { color: #c07060; }
.mk-skille { height: 1px; background: #2d2b28; margin: 9px 0; }
.mk-mal { font-size: 13px; color: #f59e0b; font-weight: 600; margin-bottom: 5px; }
.mk-krav { display: flex; gap: 8px; font-size: 12px; color: #9a9488; padding: 2px 0; }
.mk-krav.er-ok { color: #7aad80; }
.mk-krav span { flex: 1; }
.mk-krav b { font-variant-numeric: tabular-nums; font-size: 11.5px; white-space: nowrap; }
.mk-kvalitet { font-size: 11.5px; color: #9a9488; margin: 9px 0 0; }
.mk-kvalitet .er-rod { color: #c07060; }

/* Live-logg */
.mk-logg { display: grid; grid-template-columns: 42px 1fr; gap: 4px 8px; padding: 4px 0; border-bottom: 1px solid #2d2b28; }
.mk-logg:last-child { border: 0; }
.mk-logg i { color: #6a6760; font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; }
.mk-logg b { font-size: 12px; color: #f0a940; font-weight: 500; }
.mk-logg span { grid-column: 2; color: #9a9488; font-size: 11.5px; overflow-wrap: anywhere; }

/* Oppdrag */
.mk-oppdrag { background: #121210; border: 1px solid #2d2b28; border-radius: 9px; padding: 10px 11px; margin-bottom: 8px; }
.mk-oppdrag.er-godkjent { border-color: rgba(122, 173, 128, .45); }
.mk-oppdrag.er-underkjent { border-color: rgba(192, 112, 96, .45); }
/* Parkert etter tre bom. Ikke en straff — en beskjed om at oppgaven eller
   kriteriene trolig er uklare, og at et menneske må se på den. */
.mk-oppdrag.er-blokkert { border-color: rgba(192, 112, 96, .45); opacity: .75; }
.mk-oppdrag b { font-size: 12.5px; }
.mk-oppdrag ul { margin: 6px 0 0; padding-left: 18px; color: #9a9488; font-size: 11.5px; }
.mk-oppdrag p { margin: 7px 0 0; font-size: 11.5px; color: #9a9488; }
.mk-venter { color: #f0a940 !important; }

/* Idébank */
.mk-ide { display: grid; grid-template-columns: 8px 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px solid #2d2b28; align-items: baseline; }
.mk-ide:last-child { border: 0; }
.mk-idestatus { width: 8px; height: 8px; border-radius: 50%; background: #6a6760; }
.mk-idestatus.er-done { background: #7aad80; }
.mk-idestatus.er-start_now { background: #f59e0b; }
.mk-idestatus.er-new { background: #f0a940; }
.mk-ide b { font-size: 12.5px; font-weight: 400; overflow-wrap: anywhere; }
.mk-ide i { grid-column: 2; color: #6a6760; font-size: 11px; font-style: normal; }

/* Gjelden fra før han kunne skrive og lese filer. Vises, men teller ikke. */
.mk-gjeld { margin: 4px 0 0; font-size: 11px; color: var(--text-dim); line-height: 1.35; }

/* ── Til deg ──────────────────────────────────────────────────────────────
 * Oppgavene bare Michael kan gjøre. Filvelgeren er viktigere her enn på PC-en:
 * det vanligste svaret er et skjermbilde av noe som ser feil ut, og telefonen
 * er der han ser det. */
.mk-bidrag {
  border: 1px solid #2d2b28; background: #121210; border-radius: 10px;
  padding: 9px 10px; margin-bottom: 8px;
}
.mk-bidrag:last-child { margin-bottom: 0; }
.mk-bidrag-hode { display: flex; align-items: baseline; gap: 7px; }
.mk-bidrag-hode b { flex: 1; font-size: 12.5px; overflow-wrap: anywhere; }
.mk-bidrag-hode i { color: #9a9488; font-size: 11px; font-style: normal; white-space: nowrap; }
.mk-bidrag-hvorfor { margin: 5px 0 0; font-size: 11px; color: #f0a940; }
.mk-bidrag-laser { margin: 3px 0 0; font-size: 11px; color: #7aad80; }
.mk-bidrag-hva {
  margin: 7px 0 0; padding: 8px 9px; background: #1b1a18;
  border-left: 2px solid #f59e0b; border-radius: 0 7px 7px 0;
  font: inherit; font-size: 11.5px; color: #e9e6df;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.mk-bidrag-svar {
  width: 100%; box-sizing: border-box; margin-top: 7px; resize: vertical;
  background: #1b1a18; border: 1px solid #2d2b28; border-radius: 9px;
  color: #e9e6df; font: inherit; font-size: 12.5px; padding: 8px 9px;
}
.mk-bidrag-rad { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.mk-bidrag-fil {
  padding: 5px 10px; border: 1px dashed #2d2b28; border-radius: 999px;
  font-size: 11.5px; color: #9a9488;
}
.mk-bidrag-filnavn {
  flex: 1; min-width: 0; font-size: 10.5px; color: #6a6760;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-bidrag-ja, .mk-bidrag-nei {
  padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 12px;
  border: 1px solid #2d2b28; background: #1b1a18; color: #9a9488;
}
.mk-bidrag-ja {
  background: rgba(245, 158, 11, .15); border-color: #f59e0b; color: #f59e0b; font-weight: 600;
}
.mk-bidrag-feil:empty { display: none; }
.mk-bidrag-feil { margin: 6px 0 0; font-size: 11px; color: #c07060; }