/* Skaperflaten - min.mikkelmekker.no
 *
 * ÉN responsiv flate (CLAUDE.md regel 36). Rammene settes av 390 piksler;
 * desktop faar MER PLASS, ikke et annet design. Forskjellen ligger her, ikke
 * i Go.
 *
 * Egen fil, ikke <style> i hver mal - Jorgen pekte paa det 2. oktober 2026,
 * og han hadde rett: CSS som ligger i seks maler er CSS ingen leser. Fila
 * serveres av Go fra embed, saa den rulles ut sammen med malene og kan ikke
 * komme i utakt med dem.
 */

/* ---- fra ramme.html ---- */
/* ÉN responsiv flate (regel 36). Rammene settes av 390 piksler; desktop faar
   MER PLASS, ikke et annet design. Forskjellen ligger her, ikke i Go. */
:root{
  --blekk:#16171b; --papir:#fbfaf8; --dempet:#6b6d76; --kant:#e3e0da;
  --felt:#ffffff; --aksent:#2f5d50; --aksent-tekst:#ffffff; --feil:#9a2c2c;
  --radius:14px;
}
@media (prefers-color-scheme:dark){
  :root{--blekk:#eceae6; --papir:#14151a; --dempet:#9a9ca6; --kant:#2b2d35;
        --felt:#1c1e25; --aksent:#6fae99; --aksent-tekst:#0e1714; --feil:#e58b8b;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papir); color:var(--blekk);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* Trygg sone paa iPhone - flaten brukes staaende, i haanda. */
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.ark{max-width:34rem; margin:0 auto; padding:1.5rem 1.25rem 4rem}
h1{font-size:1.5rem; margin:0 0 .25rem; text-wrap:balance}
h2{font-size:1.05rem; margin:2rem 0 .75rem}
p{margin:.5rem 0}
.dempet{color:var(--dempet); font-size:.9rem}
label{display:block; font-weight:600; font-size:.9rem; margin:1rem 0 .35rem}
input[type=email],input[type=password],input[type=text]{
  width:100%; padding:.85rem .9rem; font-size:16px; /* 16px: mindre zoomer iOS */
  border:1px solid var(--kant); border-radius:var(--radius);
  background:var(--felt); color:var(--blekk);
}
input:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--aksent); outline-offset:2px}
button{
  width:100%; margin-top:1.25rem; padding:.9rem 1rem; font-size:1rem; font-weight:600;
  min-height:48px; /* tommelflate */
  border:0; border-radius:var(--radius); background:var(--aksent);
  color:var(--aksent-tekst); cursor:pointer;
}
button.stille{background:transparent; color:var(--dempet);
  border:1px solid var(--kant); font-weight:500; margin:0; width:auto;
  padding:.5rem .8rem; min-height:44px}
.feil{margin:1rem 0 0; padding:.8rem .9rem; border-radius:var(--radius);
  background:color-mix(in srgb,var(--feil) 12%,transparent);
  color:var(--feil); font-size:.92rem}
.merk{margin:1rem 0 0; padding:.8rem .9rem; border-radius:var(--radius);
  border:1px solid var(--kant); font-size:.92rem}
.husk{display:flex; gap:.6rem; align-items:flex-start; margin-top:1.25rem;
  font-size:.92rem; font-weight:400}
.husk input{width:1.15rem; height:1.15rem; margin:.15rem 0 0; flex:none}
.topp{display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; margin-bottom:1.5rem}
.topp form{margin:0}

/* Kort paa mobil, tabell paa desktop - SAMME tabell, samme data.
   Ingen gren i malen: forskjellen er her. */
table.stabel{width:100%; border-collapse:collapse; font-size:.95rem}
table.stabel th{text-align:left; font-size:.8rem; color:var(--dempet);
  text-transform:uppercase; letter-spacing:.04em}
table.stabel td{vertical-align:top}
table.stabel .rad-handling{white-space:nowrap}
@media (max-width:39rem){
  table.stabel thead{position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0)}
  table.stabel tr{display:block; border:1px solid var(--kant);
    border-radius:var(--radius); padding:.9rem; margin-bottom:.75rem;
    background:var(--felt)}
  table.stabel td{display:block; padding:.1rem 0}
  table.stabel td[data-merkelapp]::before{
    content:attr(data-merkelapp) " "; color:var(--dempet); font-size:.85rem}
  table.stabel td.rad-navn{font-weight:600; font-size:1.02rem;
    margin-bottom:.25rem}
  table.stabel td.rad-handling{margin-top:.6rem}
}
@media (min-width:39.0625rem){
  .ark{max-width:52rem; padding-top:2.5rem}
  table.stabel th,table.stabel td{padding:.6rem .75rem;
    border-bottom:1px solid var(--kant)}
  table.stabel td.rad-navn{font-weight:600}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- fra forside.html ---- */
.stor-knapp{display:block; text-align:center; text-decoration:none;
  padding:1rem; margin:1.5rem 0; min-height:48px;
  border-radius:var(--radius); background:var(--aksent);
  color:var(--aksent-tekst); font-weight:600; font-size:1.05rem}

/* ---- fra inntekt.html ---- */
.tall-kort{border:1px solid var(--kant); border-radius:var(--radius);
  padding:1rem 1.1rem; background:var(--felt); margin:1.5rem 0 1rem}
.tall-kort .rad{display:flex; justify-content:space-between; gap:1rem;
  padding:.45rem 0; align-items:baseline}
.tall-kort .rad.sum{border-top:1px solid var(--kant); margin-top:.4rem;
  padding-top:.7rem; font-size:1.15rem}
.tall-kort .rad.sum strong{color:var(--aksent)}
.tall{font-variant-numeric:tabular-nums}
.sperrer{margin:.5rem 0 0; padding-left:1.1rem}
.sperrer li{margin:.35rem 0}

/* ---- fra kom-i-gang.html ---- */
.sjekkliste{list-style:none; padding:0; margin:1.5rem 0 0}
.sjekkliste li{display:flex; gap:.85rem; align-items:flex-start;
  padding:.9rem 0; border-top:1px solid var(--kant)}
.sjekkliste li:last-child{border-bottom:1px solid var(--kant)}
.merke{flex:none; width:1.6rem; height:1.6rem; border-radius:50%;
  border:1px solid var(--kant); display:grid; place-items:center;
  font-size:.9rem; color:var(--dempet)}
.sjekkliste li.ferdig .merke{background:var(--aksent); color:var(--aksent-tekst);
  border-color:var(--aksent)}
.sjekkliste .navn{font-weight:600}
.sjekkliste .verdi{margin:.15rem 0}
.sjekkliste li.ferdig .navn{color:var(--dempet); font-weight:500}

/* ---- fra lenker.html ---- */
.ferdig{border:1px solid var(--aksent); border-radius:var(--radius);
  padding:1rem; margin-bottom:1.5rem; background:var(--felt)}
.ferdig .dempet{margin:0 0 .4rem}
.kortlenke{font:600 1.05rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-align:center}
.knapper{display:flex; gap:.6rem; margin-top:.75rem}
.knapper button{margin:0; flex:1}
#del{background:transparent; color:var(--aksent);
  border:1px solid var(--aksent)}
.verktoy select{width:100%; padding:.85rem .9rem; font-size:16px;
  border:1px solid var(--kant); border-radius:var(--radius);
  background:var(--felt); color:var(--blekk); min-height:48px}
.mono{font:.9rem ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---- fra snarvei.html ---- */
.steg{padding-left:1.3rem; margin:1.5rem 0}
.steg li{margin:.7rem 0}
.steg p{margin:.5rem 0}
code{font:.9em ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--felt); padding:.1em .35em; border-radius:4px}
.kortlenke{font:.95rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}