:root{
  --bg:#f4f6f8; --card:#fff; --ink:#1f2d3a; --muted:#6b7886; --line:#e2e8ee;
  --accent:#3c6e8f; --accent-d:#2c5670; --ok:#2e7d52; --warn:#b5632a; --bad:#d9534f;
  --shadow:0 1px 3px rgba(20,40,60,.08),0 6px 24px rgba(20,40,60,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
/* innloggings-overlay (Supabase magic-link) */
#auth-gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:#eef2f5;padding:20px}
#auth-gate[hidden]{display:none}
.auth-box{background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(20,40,60,.16);
  padding:30px 28px;max-width:380px;width:100%}
.auth-box h1{margin:0 0 2px;font-size:1.5rem}
.auth-box p{color:var(--muted);font-size:.92rem;margin:0 0 18px}
.auth-box label{display:block;font-weight:600;font-size:.85rem;margin:0 0 6px}
.auth-box input{width:100%;padding:12px 14px;font-size:1.05rem;border:1px solid #cdd8e0;border-radius:10px;margin:0 0 14px}
.auth-box button{width:100%;padding:12px;font-size:1rem;font-weight:700;color:#fff;background:var(--accent);
  border:0;border-radius:10px;cursor:pointer}
.auth-box button:disabled{opacity:.6}
.auth-msg{min-height:1.2em;margin-top:10px;font-size:.9rem;text-align:center}
.auth-msg.err{color:var(--bad)} .auth-msg.ok{color:var(--ok)}
/* topp-bar (prosjekter + bruker) — vises naar innlogget */
#user-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;
  background:#fff;border-bottom:1px solid var(--line);padding:8px 14px}
#user-bar[hidden]{display:none}
.ub-projects,.ub-user{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#user-bar select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;max-width:220px}
.ub-btn{padding:7px 11px;border:1px solid var(--line);background:#f7fafc;color:var(--accent-d);
  border-radius:8px;font-weight:600;font-size:.85rem;cursor:pointer}
.ub-btn:hover{border-color:var(--accent)}
.ub-email{color:var(--muted);font-size:.85rem} .ub-msg{color:var(--ok);font-size:.82rem}
header{padding:28px 18px 8px;max-width:920px;margin:0 auto}
h1{margin:0;font-size:1.7rem;letter-spacing:-.02em}
.sub{color:var(--muted);margin:.3rem 0 0}
main{max-width:920px;margin:0 auto;padding:14px 14px 60px}

.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px 20px;margin:16px 0;box-shadow:var(--shadow)}
.card h2{margin:.1rem 0 .2rem;font-size:1.2rem}
.step{position:absolute;top:-12px;left:18px;width:28px;height:28px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.95rem}
.hint{color:var(--muted);font-size:.9rem;margin:.2rem 0 1rem}
code{background:#eef2f5;padding:1px 5px;border-radius:5px;font-size:.85em}

.row{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0}
.row>label{flex:1;min-width:140px}
[hidden]{display:none !important}   /* display:flex o.l. skal aldri overstyre hidden */
label{display:block;font-size:.82rem;font-weight:600;color:var(--muted)}
input,select{width:100%;margin-top:5px;padding:10px 11px;border:1px solid var(--line);
  border-radius:9px;font-size:1rem;background:#fff;color:var(--ink)}
input[type=range]{padding:0}
.rangelbl{display:flex;justify-content:space-between;font-weight:500;font-size:.72rem;margin-top:2px}

label.file{display:block;margin:8px 0}
label.file input{display:none}
label.file span{display:block;padding:13px;text-align:center;border:1.5px dashed #b9c6d1;
  border-radius:10px;color:var(--accent-d);font-weight:600;cursor:pointer;background:#fafcfd}
label.file span:hover{background:#f0f5f8}

button{font-size:1rem;font-weight:600;border-radius:10px;cursor:pointer;border:1px solid transparent;
  padding:12px 16px}
button.primary{background:var(--accent);color:#fff;width:100%;margin-top:6px}
button.primary:hover{background:var(--accent-d)}
button.primary:disabled{opacity:.55;cursor:wait}
button.ghost{background:#fff;border-color:var(--line);color:var(--accent-d)}

.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:6px 0 12px}
.seg button{flex:1;background:#fff;border:0;border-radius:0;color:var(--muted);padding:11px}
.seg button.active{background:var(--accent);color:#fff}

.status{font-size:.9rem;margin-top:10px;min-height:1.2em}
.status.err{color:var(--bad)} .status.ok{color:var(--ok)}
.status .spin{display:inline-block;width:14px;height:14px;border:2px solid #cdd8e0;
  border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes sp{to{transform:rotate(360deg)}}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-top:14px}
.tile{border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center;background:#fbfcfd}
.tile svg{width:100%;height:62px;display:block}
.tile .id{font-weight:700;font-size:.9rem}
.tile .a{color:var(--muted);font-size:.72rem}
.tile{cursor:pointer;transition:border-color .12s}
.tile:hover{border-color:var(--accent)}
.tile.warn{border-color:var(--warn);background:#fdf6ef}
.tile .flag{color:var(--warn);font-size:.66rem;font-weight:700}
/* kontroll-modal */
#review-overlay{position:fixed;inset:0;background:rgba(20,30,38,.62);display:flex;
  align-items:center;justify-content:center;z-index:50;padding:16px}
#review-overlay[hidden]{display:none}
.review-box{background:#fff;border-radius:14px;max-width:560px;width:100%;max-height:92vh;
  overflow:auto;padding:18px 20px;position:relative;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.review-close{position:absolute;top:10px;right:12px;border:0;background:#f0f3f6;border-radius:50%;
  width:30px;height:30px;font-size:1rem;cursor:pointer;color:var(--muted)}
.review-box h3{margin:.1rem 0 .6rem}
.review-img{width:100%;border-radius:10px;display:block}
.review-svg{width:100%;height:200px}
.review-warn{color:var(--warn);font-weight:600}
#review-del{margin-top:10px}
/* live kamera */
#cam-overlay{position:fixed;inset:0;background:#000;z-index:60;display:flex;flex-direction:column}
#cam-overlay[hidden]{display:none}
.cam-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cam-frame{position:relative;max-width:100%;max-height:100%;line-height:0}
#cam-video{display:block;max-width:100%;max-height:100vh;width:auto;height:auto}
#cam-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cam-status{position:absolute;top:0;left:0;right:0;padding:12px 16px;color:#fff;font-size:.9rem;
  font-weight:600;text-align:center;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.cam-close{position:absolute;top:10px;right:12px;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;font-size:1.1rem;cursor:pointer;z-index:2}
.cam-bar{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;
  padding:22px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.cam-shot{width:72px;height:72px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.45);
  cursor:pointer;box-shadow:0 0 0 2px #000 inset}
.cam-shot:disabled{opacity:.4;cursor:not-allowed}
.cam-result{position:absolute;inset:0;background:rgba(15,22,28,.9);display:flex;
  align-items:center;justify-content:center;padding:16px;z-index:3}
.cam-result[hidden]{display:none}
.cam-result-box{background:#fff;border-radius:14px;max-width:520px;width:100%;max-height:94vh;
  overflow:auto;padding:18px 20px}
.cam-result-box h3{margin:.1rem 0 .6rem}
.cam-idlbl{display:flex;align-items:center;gap:10px;font-weight:600;margin:10px 0}
.cam-idlbl input{width:90px}
.cam-actions{display:flex;gap:10px;margin-top:8px}
.cam-actions button{flex:1}

.summary{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.kpi{flex:1;min-width:96px;background:#f3f7fa;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.kpi b{display:block;font-size:1.3rem;letter-spacing:-.01em}
.kpi span{font-size:.74rem;color:var(--muted)}
.kpi.warn b{color:var(--warn)}

.svgbox{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;margin-top:6px}
.svgbox svg{width:100%;height:auto;display:block;touch-action:none}
#editor svg{cursor:grab}                 /* tomrom -> panorer */
#editor svg .stone{cursor:grab}
#editor svg .stone.sel .body{stroke:#c0392b}
#editor svg .grabbing{cursor:grabbing}
#editor svg .rot-handle{display:none;cursor:grab}
#editor svg .stone.sel .rot-handle{display:block}
#editor svg .rg-vertex{cursor:move}
#editor svg .rg-mid{cursor:copy;opacity:.75}
#editor svg .rg-mid:hover{opacity:1}
.zoombar{display:inline-flex;gap:4px;margin-left:auto}
.zoombar button{min-width:38px;font-weight:700}
.editor-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.actions{margin:12px 0}

#sections-bar{background:#f3f7fa;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:8px 0 14px}
#sections-bar .row{margin:0 0 8px;align-items:flex-end}
.sec-list{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0}
.sec-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:6px 6px 6px 13px;font-size:.86rem;cursor:pointer}
.sec-chip.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.sec-chip b{font-weight:700}
.sec-chip .meta{color:var(--muted);font-size:.78rem}
.sec-chip .del{border:0;background:#f0f3f6;color:var(--bad);border-radius:50%;width:22px;height:22px;
  padding:0;cursor:pointer;font-size:.9rem;line-height:1}
#sec-overview{font-size:.88rem}
#sec-overview table{width:100%;border-collapse:collapse;margin-top:6px}
#sec-overview th,#sec-overview td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--line)}
#sec-overview th{color:var(--muted);font-size:.76rem;text-transform:uppercase}
#move-to{width:auto;margin:0;padding:8px 10px}

.draw-tools{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
#region-canvas{height:auto}
#region-canvas svg{width:100%;height:auto;display:block;touch-action:none;background:#fcfcfd}
#region-canvas .vtx{fill:#3c6e8f;stroke:#fff;cursor:grab}
#region-canvas .vtx.sel{fill:#c0392b}
#region-canvas .bulge{fill:#fff;stroke:#3c6e8f;cursor:grab}
#region-canvas .elen{fill:#6b7886;font-family:system-ui,Arial,sans-serif}
#rd-point-editor{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0;
  padding:10px 12px;background:#f3f7fa;border:1px solid var(--line);border-radius:10px}
#rd-point-editor label{display:flex;align-items:center;gap:5px;font-weight:600;color:var(--muted)}
#rd-point-editor input{width:84px;margin:0}
#rd-point-editor button{width:auto;padding:8px 12px;margin:0;background:#fff;border:1px solid var(--line);color:var(--accent-d)}
#rd-point-editor button.danger{border-color:#e3b7b3;color:var(--bad)}

.editor-tools{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
button.slim{width:auto;padding:9px 14px;margin:0}
.edit-hint{color:var(--muted);font-size:.85rem;margin:.2rem 0 .4rem}
#stone-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0;
  padding:10px 12px;background:#f3f7fa;border:1px solid var(--line);border-radius:10px}
#stone-tools #sel-label{font-weight:700}
#stone-tools button{width:auto;padding:9px 14px;margin:0;background:#fff;border:1px solid var(--line);color:var(--accent-d)}
#stone-tools button.danger{border-color:#e3b7b3;color:var(--bad)}
details{margin-top:10px}
summary{cursor:pointer;font-weight:600;color:var(--accent-d)}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;margin-top:8px;font-size:.9rem}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
td.cut{color:var(--warn);font-weight:600}

footer{max-width:920px;margin:10px auto 0;padding:0 18px;color:var(--muted);font-size:.82rem}