/* Täckt grafisk profil v0.1: bläck på papper, Archivo + JetBrains Mono, en yta en färg. */
:root{
  --black:#15171A; --papper:#F2ECDF; --gron:#0B4D3A; --lucka:#E4572E; --linne:#E3DACA; --grafit:#5C5A55; --vit:#FFFFFF;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--papper);color:var(--black);font-family:'Archivo',system-ui,sans-serif;font-weight:500}
body{min-height:100vh}
.skarm{max-width:560px;margin:0 auto;padding:40px 20px 32px;display:flex;flex-direction:column;gap:18px;min-height:100vh}
/* Desktop: samma profil, två spalter. Vänster är vad som händer, höger är vad du har. */
.tva{display:flex;flex-direction:column;gap:18px}
.tva>*{min-width:0;display:flex;flex-direction:column;gap:18px}
@media (min-width:900px){
  .skarm{max-width:1160px;padding:40px 40px 48px}
  .tva{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr);gap:24px 64px;align-items:start}
  .tva>aside{position:sticky;top:24px}
  h1{font-size:72px}
  .lista.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
.atgard{background:var(--vit);border:1.5px solid var(--black);padding:18px;display:flex;flex-direction:column;gap:12px}
.atgard .rub{font-weight:800;font-size:17px}
.mandat{display:flex;flex-direction:column;gap:6px}
.mandat label{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4;cursor:pointer;min-height:32px}
.mandat input{margin-top:3px;accent-color:#15171A}
.last{background:var(--linne);border:1.5px dashed var(--grafit);padding:16px;display:flex;flex-direction:column;gap:8px}
.last .rad span:last-child{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--grafit)}
.ok{background:var(--gron);color:var(--papper);padding:12px 14px;font-size:14px;line-height:1.4;font-weight:700}
.tabort{background:none;border:0;font:inherit;font-weight:700;font-size:13px;color:var(--grafit);cursor:pointer;min-height:32px;padding:0 4px;text-decoration:underline}
.tabort:hover{color:var(--lucka)}
.mono{font-family:'JetBrains Mono',monospace}
.etikett{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grafit);display:flex;justify-content:space-between;gap:12px}
h1{margin:0;font-weight:900;letter-spacing:-.045em;line-height:.9;font-size:clamp(36px,9vw,52px)}
h2{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.1;font-size:22px}
p{margin:0;font-size:16px;line-height:1.45}
.knapp{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:14px 18px;border:1.5px solid var(--black);background:var(--black);color:var(--papper);font:inherit;font-weight:800;font-size:17px;cursor:pointer;text-decoration:none;width:100%}
.knapp.ljus{background:var(--vit);color:var(--black)}
.knapp:disabled{opacity:.45;cursor:default}
.knapp.rad{justify-content:space-between;text-align:left}
.knapp .hint{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--linne)}
.knapp.ljus .hint{color:var(--grafit)}
.kort{background:var(--vit);border:1.5px solid var(--black);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.kort.lucka{border-left:6px solid var(--lucka)}
.kort.bra{border-left:6px solid var(--gron)}
.kort.dubbel{border-left:6px solid var(--grafit)}
.kort .rub{font-weight:800;font-size:16px;line-height:1.3}
.kort .meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--grafit);letter-spacing:.03em}
.kort.klick{cursor:pointer}
.kort.klick:hover{background:var(--linne)}
.rad{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tom{border:1.5px dashed var(--grafit);padding:18px;font-size:14px;line-height:1.45;color:var(--grafit)}
.siffror{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.siffra{background:var(--linne);padding:12px}
.siffra .v{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:500;letter-spacing:-.02em;margin-top:4px}
.siffra .v.lucka{color:var(--lucka)} .siffra .v.gron{color:var(--gron)}
.val{display:flex;gap:8px}
.val button{flex:1;min-height:44px;border:1.5px solid var(--black);background:var(--vit);color:var(--black);font:inherit;font-weight:800;font-size:15px;cursor:pointer}
.val button.vald{background:var(--black);color:var(--papper)}
.val button.vet{border-color:var(--grafit);font-weight:700;font-size:14px}
.val button.vet.vald{background:var(--grafit);color:var(--papper)}
blockquote{margin:0;background:var(--vit);border-left:3px solid var(--black);padding:14px 16px;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.6}
blockquote footer{margin-top:10px;font-size:11px;color:var(--grafit)}
.lista{display:flex;flex-direction:column;gap:10px}
.tagg{display:inline-flex;align-self:flex-start;padding:6px 10px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.tagg.lucka{background:var(--lucka)} .tagg.kontrollera{background:var(--linne)} .tagg.dubbel{background:var(--grafit);color:var(--papper)} .tagg.pris{background:var(--gron);color:var(--papper)}
.fot{font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.6;letter-spacing:.03em;color:var(--grafit)}
.lank{color:var(--black);font-weight:700}
.marke{display:block}
input[type=text]{min-height:52px;padding:12px 16px;border:1.5px solid var(--black);background:var(--vit);font:inherit;font-size:17px;width:100%}
input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
label.knapp{position:relative}
.botten{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.fel{background:var(--lucka);padding:12px 14px;font-size:14px;line-height:1.4}
ol.steg{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.4}
ol.steg li{display:flex;gap:14px}
ol.steg .n{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--grafit);margin-top:3px}
.varfor{font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.5;color:var(--grafit)}
.gron-text{color:var(--gron)}
.navi{display:flex;gap:18px;font-weight:700;font-size:14px}
.navi a{color:var(--grafit);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent}
.navi a.aktiv{color:var(--black);border-bottom-color:var(--black)}
.tagg.bra{background:var(--gron);color:var(--papper)}