/* Pakkestudio — felles grensesnitt. Kun sans serif. */

:root{
  --ink:#1c1a17;
  --ink-soft:#57514a;
  --ink-faint:#8b847b;
  --paper:#f6f4f0;
  --panel:#ffffff;
  --line:#e2ded6;
  --line-strong:#cdc7bc;
  --accent:#16706b;
  --accent-soft:#e2f0ee;
  --shadow:0 1px 2px rgba(28,26,23,.06), 0 8px 24px rgba(28,26,23,.06);
  --radius:10px;
  --sans:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box;}

[hidden]{display:none !important;}

html,body{height:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent);}

/* ---------- layout ---------- */
#root{height:100%;}

.app{
  height:100%;
  display:grid;
  grid-template-columns:320px 1fr;
}
.app.viewer-only{grid-template-columns:1fr;}

.panel{
  background:var(--panel);
  border-right:1px solid var(--line);
  overflow-y:auto;
  padding:20px 20px 40px;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.brand{display:flex;flex-direction:column;gap:2px;}
.brand h1{
  margin:0;
  font-size:19px;
  font-weight:700;
  letter-spacing:-.01em;
}
.brand p{margin:0;color:var(--ink-faint);font-size:12px;}

.group{display:flex;flex-direction:column;gap:10px;}
.group > h2{
  margin:0;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;
  align-items:center;
  gap:8px;
}
.group > h2::after{content:"";flex:1;height:1px;background:var(--line);}

/* ---------- skjemaelementer ---------- */
.dims{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.field{display:flex;flex-direction:column;gap:4px;}
.field label{
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

input[type="text"],input[type="number"],select,textarea{
  width:100%;
  padding:7px 8px;
  border:1px solid var(--line-strong);
  border-radius:7px;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:13px;
}
input[type="number"]{font-variant-numeric:tabular-nums;}
select{padding:6px 8px;font-size:12.5px;width:auto;}
textarea{resize:vertical;min-height:52px;line-height:1.4;}

input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,.slot:focus-visible,.card:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.row label{font-size:12.5px;color:var(--ink-soft);}
input[type="range"]{width:132px;accent-color:var(--accent);}
.val{
  font-size:11.5px;
  color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
  min-width:34px;
  text-align:right;
}

.btns{display:flex;gap:8px;flex-wrap:wrap;}
.btn{
  flex:1;
  min-width:104px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink);
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:500;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
}
.btn:hover{border-color:var(--accent);color:var(--accent);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.primary:hover{filter:brightness(1.08);color:#fff;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.btn[disabled]:hover{border-color:var(--line-strong);color:var(--ink);}

.note{font-size:11.5px;color:var(--ink-faint);margin:0;}
.note code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  background:var(--paper);
  padding:1px 4px;
  border-radius:4px;
}

/* ---------- bilderuter ---------- */
.faces{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.slot{
  position:relative;
  border:1px dashed var(--line-strong);
  border-radius:var(--radius);
  background:var(--paper);
  padding:0;
  cursor:pointer;
  overflow:hidden;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  transition:border-color .15s, background .15s;
}
.slot:hover,.slot.drag{border-color:var(--accent);background:var(--accent-soft);}
.slot img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#fff;
}
.slot .tag{
  position:absolute;
  left:0;right:0;bottom:0;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  padding:4px 6px;
  background:rgba(255,255,255,.88);
  color:#1c1a17;
  text-align:left;
}
.slot .empty{font-size:11px;color:var(--ink-faint);text-align:center;padding:0 6px;}
.slot .acts{position:absolute;top:5px;right:5px;display:flex;gap:4px;opacity:0;transition:opacity .15s;}
.slot:hover .acts,.slot:focus-within .acts{opacity:1;}
.slot.filled .acts{opacity:.85;}
.mini{
  border:none;
  border-radius:5px;
  background:rgba(28,26,23,.72);
  color:#fff;
  width:22px;height:22px;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  padding:0;
  display:grid;
  place-items:center;
  font-family:var(--sans);
}
.mini:hover{background:var(--accent);}

/* ---------- scene ---------- */
.stage{position:relative;min-width:0;overflow:hidden;background:#fff;}
.stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;}
.stage canvas:active{cursor:grabbing;}

.overlay{
  position:absolute;
  font-size:11.5px;
  color:#6c665e;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.06);
  padding:5px 9px;
  border-radius:7px;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.overlay.bl{left:16px;bottom:16px;}
.overlay.br{right:16px;bottom:16px;}

/* ---------- kundevisning ---------- */
.client-head{
  position:absolute;
  top:16px;left:16px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  padding:12px 14px;
  max-width:min(340px, calc(100% - 32px));
  backdrop-filter:blur(3px);
}
.client-head .eyebrow{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 3px;
}
.client-head h1{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;}
.client-head p{margin:4px 0 0;font-size:12.5px;color:var(--ink-soft);}

.drafts{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:16px;
  display:flex;
  gap:8px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px;
  padding:6px;
  backdrop-filter:blur(3px);
  max-width:calc(100% - 32px);
  overflow-x:auto;
}
.draft{
  border:1px solid transparent;
  background:transparent;
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:500;
  padding:6px 14px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
}
.draft:hover{color:var(--accent);}
.draft[aria-pressed="true"]{background:var(--accent);color:#fff;}

.tools{
  position:absolute;
  top:16px;right:16px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:calc(100% - 32px);
}
.tool{
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.82);
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  padding:6px 11px;
  border-radius:8px;
  cursor:pointer;
  backdrop-filter:blur(3px);
}
.tool:hover{color:var(--accent);border-color:var(--accent);}
.tool[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent);}

/* ---------- oversikt ---------- */
.index{
  max-width:1080px;
  margin:0 auto;
  padding:48px 20px 80px;
}
.index header{margin-bottom:32px;}
.index header h1{margin:0 0 6px;font-size:26px;font-weight:700;letter-spacing:-.015em;}
.index header p{margin:0;color:var(--ink-soft);font-size:14px;}

.client-group{margin-bottom:40px;}
.client-group h2{
  margin:0 0 12px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;
  align-items:center;
  gap:10px;
}
.client-group h2::after{content:"";flex:1;height:1px;background:var(--line);}
.client-group h2 a{font-size:11px;letter-spacing:.06em;text-transform:none;font-weight:500;}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:16px;
}
.card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--shadow);
  transition:border-color .15s, transform .15s;
}
.card:hover{border-color:var(--accent);transform:translateY(-2px);}
.card .thumb{
  aspect-ratio:3/4;
  background:#f0eee9;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.card .thumb img{width:100%;height:100%;object-fit:contain;padding:14px;}
.card .meta{padding:11px 13px 13px;display:flex;flex-direction:column;gap:2px;}
.card .meta strong{font-size:13.5px;font-weight:600;}
.card .meta span{font-size:11.5px;color:var(--ink-faint);}

.empty-state{
  border:1px dashed var(--line-strong);
  border-radius:var(--radius);
  padding:32px;
  text-align:center;
  color:var(--ink-faint);
  font-size:13px;
}

/* ---------- responsivt ---------- */
@media (max-width:820px){
  html,body{height:auto;}
  .app{grid-template-columns:1fr;height:auto;}
  .panel{border-right:none;border-bottom:1px solid var(--line);order:2;}
  .stage{order:1;height:62vh;min-height:340px;}
  .client-head{max-width:calc(100% - 32px);}
}

/* ---------- passportal ---------- */
.gate{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 20px;
}
.gate-card{
  width:100%;
  max-width:360px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.gate-card .eyebrow{
  margin:0;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.gate-card h1{
  margin:0;
  font-size:19px;
  font-weight:700;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.gate-intro{margin:0 0 6px;font-size:13px;color:var(--ink-soft);}
.gate-card label{
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.gate-card input[type="password"]{
  width:100%;
  padding:9px 10px;
  border:1px solid var(--line-strong);
  border-radius:7px;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
}
.gate-card .btn{margin-top:6px;flex:none;}
.gate-error{
  margin:0;
  font-size:12.5px;
  color:#a3392b;
  background:#fbeeeb;
  border:1px solid #f0d3cd;
  border-radius:7px;
  padding:7px 9px;
}

.locked-card .thumb{background:#edeae4;}
.lock-mark{
  font-size:20px;
  letter-spacing:.3em;
  color:var(--ink-faint);
  padding-left:.3em;
}

/* ---------- faner ---------- */
.tabs{
  display:flex;gap:4px;padding:3px;
  background:var(--paper);border:1px solid var(--line);border-radius:9px;
}
.tab{
  flex:1;border:none;background:transparent;color:var(--ink-soft);
  font-family:var(--sans);font-size:12.5px;font-weight:500;
  padding:6px 10px;border-radius:7px;cursor:pointer;
}
.tab:hover{color:var(--accent);}
.tab[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow);}

#library,#editor{display:flex;flex-direction:column;gap:26px;}

/* ---------- lister ---------- */
.stack{display:flex;flex-direction:column;gap:6px;}
.item{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:9px;
  background:var(--paper);padding:6px 8px;
}
.item-thumb{
  width:34px;height:44px;flex:none;border-radius:5px;overflow:hidden;
  background:#fff;border:1px solid var(--line);
}
.item-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.item-main{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;
  border:none;background:transparent;padding:0;text-align:left;cursor:pointer;
  font-family:var(--sans);color:inherit;
}
.item-main.static{cursor:default;}
.item-main strong{font-size:12.5px;font-weight:600;}
.item-main span{font-size:11px;color:var(--ink-faint);}
.item-main:not(.static):hover strong{color:var(--accent);}
.item-act{
  border:1px solid var(--line-strong);background:transparent;color:var(--ink-soft);
  font-family:var(--sans);font-size:11px;padding:4px 8px;border-radius:6px;cursor:pointer;
}
.item-act:hover{border-color:var(--accent);color:var(--accent);}
.item-del{
  border:none;background:transparent;color:var(--ink-faint);
  font-size:17px;line-height:1;width:24px;height:24px;border-radius:6px;cursor:pointer;
  font-family:var(--sans);flex:none;
}
.item-del:hover{background:#fbeeeb;color:#a3392b;}

.pw-form{flex-basis:100%;display:flex;gap:6px;padding-top:4px;}
.pw-form input{flex:1;font-size:12px;padding:5px 7px;}
.pw-form .btn{flex:none;min-width:0;padding:5px 10px;font-size:11.5px;}

.badge{
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);
  padding:2px 6px;border-radius:999px;vertical-align:1px;
}
.client-group h2 .badge{margin-left:2px;}

/* ---------- status ---------- */
.status{
  margin:0;font-size:12px;color:var(--ink-soft);
  background:var(--accent-soft);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;
}
.status.error{color:#a3392b;background:#fbeeeb;border-color:#f0d3cd;}

.loading{color:var(--ink-faint);font-size:13px;}