@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;600&display=swap');
:root{
  --bg:#ECEFE7; --panel:#F7F8F3; --ink:#252A20; --mut:#5C6354;
  --line:#C7CDBD; --ntr:#6B8F3C; --ntrdark:#4C6828;
  --regel:#E3E9CF; --regeledge:#77894F; --trall:#CBE0A6;
  --warn:#9C4E0F; --zone:#E8DCC4; --save:#2E6E33;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;
  overflow-x:hidden;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:36px 36px;}
.wrap{max-width:980px;margin:0 auto;padding:16px 16px 96px}
header .fam{font-family:var(--mono);font-size:12.5px;color:var(--mut)}
header h1{font-family:var(--mono);font-weight:500;font-size:26px;margin:2px 0 2px;letter-spacing:-0.5px}
header p{margin:0 0 14px;color:var(--mut);max-width:60ch}

/* Stegnavigering */
nav#steps{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  background:var(--panel);border-top:1px solid var(--line);
  padding:0 max(8px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-right));}
nav#steps button{flex:1;padding:10px 2px 12px;border:0;background:none;cursor:pointer;
  font-family:var(--mono);font-size:12px;color:var(--mut);border-top:3px solid transparent;margin-top:-1px}
nav#steps button b{display:block;font-size:14px;font-weight:500}
nav#steps button[aria-current=true]{color:var(--ntrdark);border-top-color:var(--ntr)}
@media (min-width:820px){
  .wrap{padding-bottom:40px}
  nav#steps{position:sticky;top:0;bottom:auto;border-top:0;border-bottom:1px solid var(--line);
    margin:0 -16px 18px;padding:0 8px;border-radius:0}
  nav#steps button{border-top:0;border-bottom:3px solid transparent;margin:0;padding:12px 4px}
  nav#steps button[aria-current=true]{border-bottom-color:var(--ntr)}
}

section.step{display:none}
section.step.active{display:block}

.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px}
.controls{display:grid;gap:14px}
.twocol{display:grid;gap:16px}
@media (min-width:820px){ .twocol{grid-template-columns:minmax(300px,380px) 1fr;align-items:start} }

.sliderrow label{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;column-gap:12px;
  font-family:var(--mono);font-size:14px;color:var(--mut)}
.sliderrow label span{white-space:nowrap}
.sliderrow output{font-size:22px;color:var(--ink);font-weight:500}
input[type=range]{width:100%;accent-color:var(--ntr);height:32px}
.minor{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.minor div label{display:block;font-family:var(--mono);font-size:12.5px;color:var(--mut);margin-bottom:4px}
.minor input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font-family:var(--mono);font-size:15px;color:var(--ink)}
.minor input:focus-visible,.seg button:focus-visible,input[type=range]:focus-visible,
.stocks label:focus-within,button:focus-visible{outline:2px solid var(--ntrdark);outline-offset:2px}
.seglabel{font-family:var(--mono);font-size:12.5px;color:var(--mut);display:block;margin-bottom:4px}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{flex:1;min-height:44px;padding:9px 4px;border:0;background:#fff;font-family:var(--mono);font-size:12.5px;color:var(--mut);cursor:pointer}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed=true]{background:var(--ntr);color:#fff}
.segrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){ .segrow{grid-template-columns:1fr} }

svg.scene{display:block;width:100%;height:auto}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips.center{justify-content:center}
@media (min-width:820px){ #chips{display:grid;grid-template-columns:1fr 1fr} }
.chip{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-family:var(--mono);font-size:13px}
.chip b{display:block;font-weight:500;font-size:15px;color:var(--ink)}
.chip span{color:var(--mut);font-size:11.5px}
.chip.warnon{border-color:var(--warn);color:var(--warn)}
.chip.warnon b{color:var(--warn)}
.chip.okon{border-color:var(--ntr)}
.chip.okon b{color:var(--ntrdark)}
.warnrow{font-family:var(--mono);font-size:13px;color:var(--warn);margin-top:10px;min-height:1.2em}

h2{font-family:var(--mono);font-weight:500;font-size:18px;margin:22px 0 4px}
h3{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--mut);margin:18px 0 6px;letter-spacing:0.3px}
p.lede{margin:0 0 10px;color:var(--mut);font-size:14px;max-width:64ch}

.item{display:grid;grid-template-columns:minmax(150px,190px) 1fr;gap:12px;align-items:center;
  padding:10px 0;border-top:1px dashed var(--line)}
.item:first-of-type{border-top:0}
.item .meta{font-family:var(--mono);font-size:13px;color:var(--mut)}
.item .meta b{display:block;font-weight:500;font-size:14.5px;color:var(--ink)}
.item svg{display:block;width:100%;height:auto}
@media (max-width:480px){ .item{grid-template-columns:1fr} }

/* Lagerlängder */
.stocks{display:flex;flex-wrap:wrap;gap:8px}
.stocks label{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:8px;min-height:44px;padding:7px 12px;font-family:var(--mono);font-size:13.5px;cursor:pointer;user-select:none}
.stocks label.on{background:var(--ntr);border-color:var(--ntrdark);color:#fff}
.stocks input{position:absolute;opacity:0;pointer-events:none}

/* Kapschema */
.plank{margin:10px 0 2px}
.plank svg{display:block;width:100%;height:auto}
.plank .cap{font-family:var(--mono);font-size:12.5px;color:var(--mut);margin-top:2px}
.dimsum{font-family:var(--mono);font-size:13.5px;margin:6px 0 2px}
.dimsum .man{color:var(--mut)}
.grand{font-family:var(--mono);font-size:14.5px;border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.grand b{font-size:20px;font-weight:500}
.grand .cmp{color:var(--mut);font-size:13px}
.grand .save{color:var(--save)}

/* Förslag */
.sugg{border-top:1px dashed var(--line);padding:10px 0;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sugg:first-of-type{border-top:0}
.sugg .txt{font-size:14px;flex:1 1 260px}
.sugg .txt b{font-family:var(--mono);font-weight:500}
.sugg .txt .why{color:var(--mut);font-size:13px}
.sugg .kr{font-family:var(--mono);font-size:15px;color:var(--save);white-space:nowrap}
.sugg .kr.rescue{color:var(--warn)}
button.apply{border:1px solid var(--ntrdark);background:var(--ntr);color:#fff;border-radius:8px;
  min-height:44px;padding:8px 14px;font-family:var(--mono);font-size:13.5px;cursor:pointer}
button.apply:hover{background:var(--ntrdark)}
button.ghost{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;
  min-height:44px;padding:8px 16px;font-family:var(--mono);font-size:13.5px;cursor:pointer}
button.ghost:hover{border-color:var(--ntrdark)}

/* Kulfång */
.big{font-family:var(--mono);text-align:center;margin:6px 0 2px}
.big b{font-size:34px;font-weight:500}
.big span{display:block;font-size:13px;color:var(--mut)}
.scrollx{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13.5px}
th,td{text-align:right;padding:7px 8px;border-bottom:1px dashed var(--line)}
th{color:var(--mut);font-weight:400}
td:first-child,th:first-child{text-align:left}
tr.now td{color:var(--ntrdark);font-weight:500}

/* Kapa */
.cutcard .cutprog{font-family:var(--mono);font-size:13px;color:var(--mut);margin-bottom:8px}
.cutcard ol.inst{margin:12px 0 14px;padding-left:24px;font-size:16.5px}
.cutcard ol.inst li{margin:0 0 10px}
.cutcard .cutbtns{display:flex;gap:10px;align-items:center}
button.apply.big{font-size:17px;padding:14px 26px}
button.ghost[disabled]{opacity:0.4;cursor:default}
.cutcard .kerfnote{font-family:var(--mono);font-size:12.5px;color:var(--mut);margin:14px 0 0}
details summary{font-family:var(--mono);font-size:14px;color:var(--mut);cursor:pointer;margin:22px 0 8px}
details summary:hover{color:var(--ink)}

/* Montera — momenten är checkboxar (role=checkbox sätts i app.js) */
.asm ol{margin:0;padding-left:22px}
.asm li{margin:0 0 10px}
.asm > ol > li{cursor:pointer}
.asm > ol > li::before{content:'';display:inline-block;width:17px;height:17px;border:1.5px solid var(--regeledge);
  border-radius:4px;background:#fff;margin-right:9px;vertical-align:-3px}
.asm > ol > li.done{color:var(--mut);text-decoration:line-through}
.asm > ol > li.done::before{content:'✓';background:var(--ntr);border-color:var(--ntrdark);color:#fff;
  text-align:center;line-height:17px;font-size:12px;text-decoration:none}
.asm > ol > li:focus-visible{outline:2px solid var(--ntrdark);outline-offset:2px;border-radius:4px}
.asm li:last-child{margin-bottom:0}
.asm ul{margin:6px 0 4px;padding-left:18px;font-family:var(--mono);font-size:13.5px}
.asm ul li{margin:0 0 4px}

.foot{color:var(--mut);font-size:13.5px;border-top:1px solid var(--line);padding-top:14px;margin-top:26px}
.foot p{margin:0 0 10px}
.notice{font-family:var(--mono);font-size:13px;color:var(--warn);background:#fff;border:1px solid var(--warn);
  border-radius:8px;padding:10px 12px;margin:10px 0}