/* ==========================================================================
   Nordiva kreatørplattform, delt designsystem

   Merkevare: Montserrat som eneste skrift, marineblå #0E1B4D som aksent,
   varm papirbakgrunn. Endre tokens her, ikke ute i sidene.
   Ingen gradienter. Ingen emoji. Ingen animasjon utover translateY(-1px).
   ========================================================================== */

:root{
  /* Merkevare */
  --brand:#0E1B4D;          /* Nordiva marineblå */
  --brand-mork:#081033;     /* trykket og hover */
  --brand-myk:#EEF1F8;      /* svak flate, sitatblokker og valgt tilstand */

  /* Tekst og flater */
  --ink:#17203C;
  --ink-soft:#4C5570;
  --paper:#F6F6F8;          /* nøytral flate, som Trybe */
  --card:#FFFFFF;
  --line:#E5E5EA;
  --line-mork:#D3D3DA;

  /* Status */
  --green:#1B6B3A;  --green-bg:#EDF5EF;  --green-line:#A9CDB6;
  --red:#A81F1F;    --red-bg:#FBEFEF;    --red-line:#E0A8A8;
  --amber:#8A6410;  --amber-bg:#FFF9E6;  --amber-line:#E0C778;
  --violet:#3A3A8A; --violet-bg:#EFEFFA; --violet-line:#B9B9E8;

  --shadow:0 1px 3px rgba(14,27,77,.04), 0 14px 38px rgba(14,27,77,.07);
  --shadow-lav:0 1px 2px rgba(14,27,77,.04), 0 6px 18px rgba(14,27,77,.05);
  --radius-card:20px;       /* Trybe ligger rundt 20 til 24 */
  --radius-el:14px;
  --radius-pill:999px;

  /* Luft. Én skala, brukt overalt. */
  --luft-1:10px;
  --luft-2:18px;
  --luft-3:28px;
  --luft-4:44px;
  --luft-5:80px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:18px;
  line-height:1.7;
  letter-spacing:.002em;
}
/* Adminpanelet tåler tettere informasjon enn kreatørflatene. */
body.tett{font-size:15px;line-height:1.6}

h1,h2,h3{font-family:inherit;font-weight:700;line-height:1.25;margin:0;letter-spacing:-.015em}
h1{font-size:2.3rem}
h2{font-size:1.6rem}
h3{font-size:1.18rem;font-weight:600;letter-spacing:-.01em}
body.tett h1{font-size:1.9rem}
body.tett h2{font-size:1.35rem}
body.tett h3{font-size:1.05rem}

p{margin:0 0 1.3rem}
a{color:var(--brand);text-underline-offset:3px}
a:hover{text-decoration:none}
img{max-width:100%;height:auto}
strong,b{font-weight:600}

:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
/* visSkjerm flytter fokus til overskriften når man bytter skjerm, slik
   at skjermlesere leser opp hvor man havnet. Men brukeren har ikke
   tabbet seg dit selv, så en tykk ramme rundt overskriften er bare
   støy. Fokuset flyttes fortsatt, det er bare markeringen vi demper. */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible,h2[tabindex="-1"]:focus-visible{outline:none}

.wrap{max-width:740px;margin:0 auto;padding:0 24px}
.wrap.bred{max-width:1200px}
.skjul{display:none !important}
.kunskjerm{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Avstand mellom seksjoner. Bruk .luft, ikke inline margin. */
.luft{margin-top:var(--luft-5)}
.luft-liten{margin-top:var(--luft-4)}

/* --------------------------------------------------------------------------
   Seglet. To tynne linjer, den nederste med 35 prosent opasitet.
   Skal antyde luft som trekkes ut. Brukes kun som seksjonsmarkør.
   -------------------------------------------------------------------------- */
.segl{display:block;height:9px;margin:0 0 var(--luft-3);position:relative}
.segl:before,.segl:after{content:'';position:absolute;left:0;right:0;height:2px;background:var(--brand)}
.segl:after{top:7px;opacity:.35}
.segl:before{top:0}

.eyebrow{
  font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brand);margin:0 0 14px;
}
h1 + .lead, h2 + .lead{margin-top:var(--luft-1)}
.lead{font-size:1.1rem;color:var(--ink-soft);margin:var(--luft-1) 0 var(--luft-3);max-width:34em}
.dempet{color:var(--ink-soft)}
.liten{font-size:.92rem}

h2 + p, h2 + ul, h3 + p{margin-top:var(--luft-1)}

/* --------------------------------------------------------------------------
   Toppstripe på offentlig side
   -------------------------------------------------------------------------- */
.topp{background:var(--card);border-bottom:1px solid var(--line)}
.topp .rad{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;padding:20px 0;
}
.merke{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.merke .navn{font-weight:700;font-size:1.1rem;letter-spacing:-.01em;display:block;line-height:1.3}
.merke .under{
  display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);font-weight:600;line-height:1.4;
}
.logo{width:40px;height:40px;flex:0 0 40px;border-radius:50%}

/* --------------------------------------------------------------------------
   Knapper. Trykkflater minimum 48px høye.
   -------------------------------------------------------------------------- */
.btn{
  font:inherit;font-size:1rem;font-weight:600;cursor:pointer;letter-spacing:.005em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:15px 30px;
  background:var(--brand);color:#fff;border:2px solid var(--brand);
  border-radius:var(--radius-pill);text-decoration:none;
}
/* Pil på slutten, slik Trybe merker sine primærhandlinger. */
.btn.pil:after{content:'\203A';font-size:1.25em;line-height:1;margin-left:2px;opacity:.85}
.btn:hover{background:var(--brand-mork);border-color:var(--brand-mork);color:#fff}
.btn.full{width:100%}
.btn.rolig{background:var(--card);color:var(--brand);border-color:var(--line-mork)}
.btn.rolig:hover{background:var(--brand-myk);border-color:var(--brand);color:var(--brand)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.knapperad{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 var(--luft-2)}

.tilbake{
  font:inherit;font-size:.98rem;font-weight:600;background:none;border:0;
  color:var(--brand);cursor:pointer;padding:12px 0;margin:0 0 var(--luft-1);
  display:inline-block;text-decoration:none;
}
.tilbake:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   Kort og paneler
   -------------------------------------------------------------------------- */
.kort{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:32px 34px;margin:0 0 var(--luft-3);box-shadow:var(--shadow);
}
.kort > :last-child{margin-bottom:0}
.kort h3{margin-bottom:var(--luft-1)}
.kort.merket{border-left:5px solid var(--brand)}
body.tett .kort{padding:26px 28px}

.panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:30px 32px;margin:0 0 var(--luft-3);box-shadow:var(--shadow);
}
.panel h2{margin-bottom:6px}
.panel .note{font-size:.92rem;color:var(--ink-soft);margin:0 0 var(--luft-3);max-width:52em}

.stat{font-size:.88rem;font-weight:600;color:var(--brand);letter-spacing:.01em;margin:0 0 var(--luft-2)}
.hvorfor{font-size:.98rem;color:var(--ink-soft);margin-bottom:0}
.hvorfor b{color:var(--ink)}

blockquote{
  margin:0 0 var(--luft-2);padding:22px 26px;background:var(--brand-myk);
  border-left:4px solid var(--brand);border-radius:0 10px 10px 0;
  font-size:1.05rem;font-weight:500;line-height:1.65;
}
ul,ol{margin:0 0 1.3rem;padding-left:1.35em}
li{margin-bottom:.75rem}
li:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   Komposisjon i bredden.

   Trybe setter kortene ved siden av hverandre i stedet for under hverandre.
   Det er det som gjør at dashbordet deres leses på ett blikk. Vi bruker
   samme grep, men beholder ett fokuspunkt i full bredde øverst.
   -------------------------------------------------------------------------- */
.rutenett{display:grid;gap:20px;align-items:start;margin:0 0 var(--luft-3)}
@media(min-width:900px){
  .rutenett.to{grid-template-columns:1.3fr 1fr}
  .rutenett.likt{grid-template-columns:1fr 1fr}
  .rutenett.tre{grid-template-columns:1fr 1.3fr 1fr}
}
.rutenett > *{margin-bottom:0;min-width:0}

/* Seksjonsrad. Tittel til venstre, handling til høyre, som deres
   «My Brands ... View All». */
.seksjonsrad{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:0 0 var(--luft-1);
}
.seksjonsrad h2,.seksjonsrad h3{margin:0}
.merlenke{
  font:inherit;font-size:.92rem;font-weight:600;background:none;border:0;
  color:var(--brand);cursor:pointer;padding:6px 0;
  display:inline-flex;align-items:center;gap:5px;
}
.merlenke:after{content:'\203A';font-size:1.25em;line-height:1}
.merlenke:hover{text-decoration:underline}

/* Menykort, brukes på portalens hjemskjerm */
.meny{display:grid;gap:18px;margin-top:var(--luft-3)}
@media(min-width:760px){.meny{grid-template-columns:1fr 1fr}}
.meny button,.meny a{
  font:inherit;text-align:left;background:var(--card);border:1px solid var(--line);
  border-left:5px solid var(--brand);border-radius:var(--radius-el);padding:28px 30px;
  cursor:pointer;box-shadow:var(--shadow);color:var(--ink);text-decoration:none;display:block;
}
.meny button:hover,.meny a:hover{border-left-color:var(--brand-mork);transform:translateY(-1px)}
.meny b{display:block;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.meny span{color:var(--ink-soft);font-size:.96rem;display:block;line-height:1.6}

/* --------------------------------------------------------------------------
   Neste steg. Ett fokuspunkt øverst i kreatørdashboardet.
   Full flate i merkefargen, så det ikke er tvil om hvor blikket skal.
   -------------------------------------------------------------------------- */
.neste{
  background:var(--brand);color:#fff;border-radius:var(--radius-card);
  padding:34px 36px;margin:var(--luft-3) 0;
}
.neste.hast{background:#7A1717}
.neste.ferdig{background:#155C32}
.neste .merk{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin:0 0 12px;
}
.neste h2{color:#fff;font-size:1.42rem;margin:0 0 var(--luft-1)}
.neste p{color:rgba(255,255,255,.88);margin:0 0 var(--luft-2);font-size:1rem;max-width:40em}
.neste p:last-child{margin-bottom:0}
.neste .sitat{
  border-left:3px solid rgba(255,255,255,.4);padding:4px 0 4px 18px;
  font-weight:500;color:#fff;
}
.neste .btn{background:#fff;color:var(--brand);border-color:#fff}
.neste .btn:hover{background:var(--brand-myk);border-color:var(--brand-myk);color:var(--brand)}
.neste .btn.rolig{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.neste .btn.rolig:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.neste .knapperad{margin:var(--luft-2) 0 0}

/* Frist, rett under neste steg */
.frist{
  display:block;font-size:.94rem;line-height:1.6;
  color:var(--ink-soft);margin:0 0 var(--luft-3);
}
.frist .rad{display:block}
.frist b{color:var(--ink);font-weight:600}
.frist .over{color:var(--red);font-weight:600}

/* --------------------------------------------------------------------------
   Sjekkliste
   -------------------------------------------------------------------------- */
.sjekk{list-style:none;padding:0;margin:0}
.sjekk li{
  display:flex;gap:16px;align-items:flex-start;margin:0;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.sjekk li:first-child{padding-top:0}
.sjekk li:last-child{border-bottom:0;padding-bottom:0}
.sjekk .rute{
  width:26px;height:26px;flex:0 0 26px;margin-top:2px;border-radius:50%;
  border:2px solid var(--line-mork);background:var(--card);
  text-align:center;line-height:22px;font-size:.78rem;font-weight:700;color:transparent;
}
.sjekk li.gjort .rute{background:var(--green);border-color:var(--green);color:#fff}
.sjekk li.gjort .hva b{color:var(--ink-soft);font-weight:500}
.sjekk .hva{line-height:1.55}
.sjekk .hva b{display:block;font-weight:600}
.sjekk .hva em{font-style:normal;color:var(--ink-soft);font-size:.92rem;display:block;margin-top:3px}

/* --------------------------------------------------------------------------
   Varsel
   -------------------------------------------------------------------------- */
.varsel{
  background:#FFF6E3;border:0;border-radius:16px;
  padding:20px 26px;margin:0 0 var(--luft-2);font-size:.95rem;line-height:1.6;
}
.varsel b{display:block;margin-bottom:6px;font-weight:700}
.varsel > :last-child{margin-bottom:0}
.varsel.ok{background:#EAF7EF}
.varsel.feil{background:#FCEFEE}
.varsel.rolig{background:var(--card);border:1px solid var(--line)}

/* --------------------------------------------------------------------------
   Påstandsliste, to kolonner over 820px
   -------------------------------------------------------------------------- */
.pastander{display:grid;gap:24px;margin-top:var(--luft-3)}
@media(min-width:820px){.pastander{grid-template-columns:1fr 1fr;align-items:start}}
.boks{border-radius:var(--radius-card);padding:30px 32px;border:2px solid}
.boks.ja{background:var(--green-bg);border-color:var(--green)}
.boks.nei{background:var(--red-bg);border-color:var(--red)}
.boks h3{font-size:1.12rem;margin-bottom:var(--luft-2)}
.boks.ja h3{color:var(--green)}
.boks.nei h3{color:var(--red)}
.boks ul{list-style:none;padding:0;margin:0}
.boks li{padding-left:34px;position:relative;font-size:.96rem;margin-bottom:16px;line-height:1.6}
.boks li:last-child{margin-bottom:0}
.boks.ja li:before{content:'\2713';position:absolute;left:0;top:0;color:var(--green);font-weight:700;font-size:1.05rem}
.boks.nei li:before{content:'\2715';position:absolute;left:0;top:0;color:var(--red);font-weight:700;font-size:.95rem}

/* --------------------------------------------------------------------------
   Merkelapper og grepsmerke
   -------------------------------------------------------------------------- */
.lapp{
  display:inline-block;font-size:.76rem;font-weight:600;padding:5px 12px;letter-spacing:.01em;
  border-radius:20px;white-space:nowrap;border:1px solid transparent;line-height:1.4;
}
.lapp.ny{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-line)}
.lapp.ok{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.lapp.endre{background:var(--violet-bg);color:var(--violet);border-color:var(--violet-line)}
.lapp.nei{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}
.lapp.rolig{background:var(--paper);color:var(--ink-soft);border-color:var(--line)}

.grep{
  display:inline-block;font-weight:700;
  width:28px;height:28px;line-height:24px;text-align:center;border:2px solid var(--brand);
  border-radius:50%;color:var(--brand);font-size:.82rem;
}

/* --------------------------------------------------------------------------
   Tabeller
   -------------------------------------------------------------------------- */
.rull{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th{
  text-align:left;font-size:.82rem;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--ink-soft);padding:0 14px 12px 0;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:16px 14px 16px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55}
tr:last-child td{border-bottom:0}
td.navn{font-weight:600}
.tall{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.bestatt{color:var(--green)}
.midt{color:var(--amber)}
.stryk{color:var(--red)}
.tomrad td{color:var(--ink-soft);font-style:italic;padding:26px 0}

.stolpe{height:8px;background:#E7E4DE;border-radius:20px;overflow:hidden;margin-top:8px;max-width:130px}
.stolpe i{display:block;height:100%;background:var(--brand)}

.handling{
  font:inherit;font-size:.86rem;font-weight:600;background:var(--card);border:1.5px solid var(--line-mork);
  border-radius:var(--radius-pill);padding:10px 18px;cursor:pointer;color:var(--ink);
  margin:0 8px 8px 0;min-height:42px;
}
.handling:hover{border-color:var(--brand);color:var(--brand)}
.handling.primar{background:var(--brand);color:#fff;border-color:var(--brand)}
.handling.primar:hover{background:var(--brand-mork);color:#fff}

/* --------------------------------------------------------------------------
   KPI-bokser
   -------------------------------------------------------------------------- */
.kpier{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:0 0 var(--luft-3)}
.kpi{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:22px 24px 24px;box-shadow:var(--shadow-lav);
}
/* Tynn farget strek i bunnen, ulik per kort, som Trybes stat-kort.
   Et kort som krever handling er aldri gult, det får bare gul strek. */
.kpi:after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--brand);opacity:.85;
}
.kpier .kpi:nth-child(2):after{background:#0485F7}
.kpier .kpi:nth-child(3):after{background:#17C964}
.kpier .kpi:nth-child(4):after{background:#8B5CF6}
.kpier .kpi:nth-child(5):after{background:#F5A524}
.kpi.flagg{border-color:var(--line);background:var(--card)}
.kpi.flagg:after{background:#F5A524}
.kpi.flagg .merk:after{
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#F5A524;margin-left:7px;vertical-align:1px;
}
.kpi .merk{font-size:.8rem;color:var(--ink-soft);margin-bottom:10px;line-height:1.4}
.kpi .tallet{font-size:1.9rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .under{font-size:.8rem;color:var(--ink-soft);margin-top:10px;line-height:1.45}

/* --------------------------------------------------------------------------
   Skjema
   -------------------------------------------------------------------------- */
.felt{margin:0 0 var(--luft-3)}
.felt label,.gruppe > legend{display:block;font-weight:600;margin:0 0 var(--luft-1);font-size:1rem;line-height:1.5}
.felt .hjelp,.gruppe .hjelp{font-size:.9rem;color:var(--ink-soft);margin:-4px 0 12px;line-height:1.6;max-width:44em}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=url],input[type=date],select,textarea{
  font:inherit;font-size:1rem;width:100%;padding:15px 18px;min-height:54px;
  border:1.5px solid var(--line);border-radius:var(--radius-el);
  background:var(--card);color:var(--ink);
}
textarea{min-height:140px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:none}
input:hover,select:hover,textarea:hover{border-color:var(--brand)}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--red)}
.feltfeil{color:var(--red);font-weight:600;font-size:.92rem;margin:10px 0 0;line-height:1.5}
.feltfeil:empty{margin:0}

.gruppe{border:0;padding:0;margin:0 0 var(--luft-3)}
.valg{display:grid;gap:12px}
.valg label{
  display:flex;gap:14px;align-items:flex-start;font-weight:400;
  border:1.5px solid var(--line);border-radius:var(--radius-el);
  padding:18px 20px;cursor:pointer;background:var(--card);margin:0;min-height:54px;line-height:1.55;
}
.valg label:hover{border-color:var(--brand);background:var(--brand-myk)}
.valg input{margin:4px 0 0;width:20px;height:20px;min-height:0;flex:0 0 20px;accent-color:var(--brand)}
.valg label > span b{display:block;font-weight:600}
.valg label > span em{display:block;font-style:normal;color:var(--ink-soft);font-size:.92rem;margin-top:4px}

/* Navnevalg ved innlogging */
.hvem{display:grid;gap:12px;margin:0 0 var(--luft-3)}
.hvem button{
  font:inherit;font-size:1.05rem;font-weight:500;text-align:left;min-height:58px;
  background:var(--card);color:var(--ink);border:1.5px solid var(--line);
  border-radius:var(--radius-el);padding:17px 20px;cursor:pointer;
}
.hvem button:hover{border-color:var(--brand)}
.hvem button[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-myk);font-weight:600}

.feilmelding{color:var(--red);font-weight:600;margin-top:var(--luft-2);min-height:1.6em;line-height:1.5}
.hint{font-size:.92rem;color:var(--ink-soft);margin-top:var(--luft-3)}

/* --------------------------------------------------------------------------
   Trinn, brukt på offentlig side
   -------------------------------------------------------------------------- */
.trinn{list-style:none;padding:0;margin:var(--luft-3) 0 0;counter-reset:t}
.trinn li{
  counter-increment:t;position:relative;padding:0 0 34px 66px;margin:0;
  border-left:2px solid var(--line);margin-left:21px;
}
.trinn li:last-child{border-left-color:transparent;padding-bottom:0}
.trinn li:before{
  content:counter(t);position:absolute;left:-22px;top:-6px;
  width:42px;height:42px;line-height:38px;text-align:center;
  font-weight:700;font-size:1rem;
  background:var(--card);color:var(--brand);border:2px solid var(--brand);border-radius:50%;
}
.trinn b{display:block;font-size:1.08rem;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.trinn span{color:var(--ink-soft);font-size:.96rem;line-height:1.65}

/* Faktaliste, to kolonner på brede skjermer */
.fakta{display:grid;gap:20px;margin:var(--luft-3) 0}
@media(min-width:700px){.fakta{grid-template-columns:1fr 1fr}}
.fakta div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-el);padding:26px 28px}
.fakta b{display:block;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.fakta span{color:var(--ink-soft);font-size:.96rem;line-height:1.65}

/* Spørsmål og svar */
details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-el);margin:0 0 14px}
details summary{
  cursor:pointer;font-weight:600;padding:20px 24px;min-height:56px;
  display:flex;align-items:center;gap:16px;list-style:none;line-height:1.5;
}
details summary::-webkit-details-marker{display:none}
details summary:after{content:'+';margin-left:auto;color:var(--brand);font-size:1.4rem;font-weight:600;line-height:1}
details[open] summary{padding-bottom:12px}
details[open] summary:after{content:'\2212'}
details .svar{padding:0 24px 22px}
details .svar > :last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   Faner i adminpanelet
   -------------------------------------------------------------------------- */
.faner{display:flex;gap:4px;margin-top:var(--luft-3);flex-wrap:wrap}
.faner button{
  font:inherit;font-size:.95rem;font-weight:500;background:none;border:0;
  border-bottom:3px solid transparent;color:var(--ink-soft);padding:13px 16px;cursor:pointer;min-height:50px;
}
.faner button:hover{color:var(--ink)}
.faner button[aria-current="true"]{color:var(--brand);font-weight:600;border-bottom-color:var(--brand)}
.faner .prikk{
  display:inline-block;margin-left:8px;background:var(--amber);color:#fff;
  font-size:.7rem;font-weight:600;border-radius:20px;padding:2px 8px;vertical-align:1px;
}

.skjerm{display:none;padding:var(--luft-4) 0 110px}
.skjerm.pa{display:block}

/* --------------------------------------------------------------------------
   Portalnavigasjon. Alltid synlig, alltid tekst, aldri skjult bak et ikon.
   Bryter over flere linjer i stedet for å scrolle sidelengs, så ingenting
   forsvinner ut av bildet på mobil.
   -------------------------------------------------------------------------- */
.portaltopp{background:var(--card);border-bottom:1px solid var(--line)}
.portaltopp .rad{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:16px 0;
}
.portaltopp .hvemer{font-size:.95rem;color:var(--ink-soft)}
.portaltopp .hvemer b{color:var(--ink);font-weight:600}

.portalnav{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:0 0 16px;
}
.portalnav button{
  font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;
  background:var(--paper);color:var(--ink);border:1.5px solid var(--line);
  border-radius:20px;padding:11px 15px;min-height:46px;white-space:nowrap;
}
.portalnav button:hover{border-color:var(--brand);color:var(--brand)}
.portalnav button[aria-current="true"]{
  background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;
}
.portalnav .prikk{
  display:inline-block;margin-left:8px;background:var(--amber);color:#fff;
  font-size:.7rem;font-weight:600;border-radius:20px;padding:1px 7px;
}
.portalnav button[aria-current="true"] .prikk{background:#fff;color:var(--brand)}

/* --------------------------------------------------------------------------
   Inspirasjon
   -------------------------------------------------------------------------- */
.insp{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:0;margin:0 0 var(--luft-3);box-shadow:var(--shadow);overflow:hidden;
}
.insp .topp2{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:24px 30px;border-bottom:1px solid var(--line);background:var(--brand-myk);
}
.insp .topp2 h3{margin:0;flex:1 1 auto;min-width:180px}
.insp .krop{padding:26px 30px}
.insp .krop > :last-child{margin-bottom:0}
.insp dl{margin:0}
.insp dt{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 6px;
}
.insp dd{margin:0 0 var(--luft-2);line-height:1.65}
.insp dd:last-child{margin-bottom:0}
.insp .tallrad{font-size:.88rem;font-weight:600;color:var(--brand);width:100%;margin:0}

/* Dekning, hvilke vinkler som mangler */
.dekning{list-style:none;padding:0;margin:0}
.dekning li{
  display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line);margin:0;
}
.dekning li:last-child{border-bottom:0}
.dekning .navnet{font-weight:600}
.dekning .navnet em{display:block;font-style:normal;font-weight:400;font-size:.9rem;color:var(--ink-soft);margin-top:2px}
.dekning .antall{font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--ink-soft);white-space:nowrap}

/* Kreatørlista. Ingen rangering, ingen tall om annonsene. */
.roster{display:grid;gap:12px;margin:0}
@media(min-width:640px){.roster{grid-template-columns:1fr 1fr}}
.roster div{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-el);
  padding:18px 20px;
}
.roster b{display:block;font-weight:600;margin-bottom:4px}
.roster span{font-size:.9rem;color:var(--ink-soft);display:block}
.roster .meg{border-color:var(--brand);background:var(--brand-myk)}

/* --------------------------------------------------------------------------
   Materiell
   -------------------------------------------------------------------------- */
.mat{display:grid;gap:16px;margin:0}
.mat article{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-el);
  padding:24px 26px;
}
.mat .slag{
  display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);margin:0 0 8px;
}
.mat h3{margin:0 0 6px}
.mat p{margin:0 0 var(--luft-2);color:var(--ink-soft);font-size:.96rem}
.mat p:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   Kontakt
   -------------------------------------------------------------------------- */
.folk{display:grid;gap:18px;margin:0 0 var(--luft-3)}
@media(min-width:640px){.folk{grid-template-columns:1fr 1fr}}
.folk article{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:26px 28px;box-shadow:var(--shadow);
}
.folk h3{margin:0 0 4px}
.folk .rolle{color:var(--ink-soft);font-size:.94rem;margin:0 0 var(--luft-2)}
.folk .knapperad{margin:0}
.folk .btn{font-size:.95rem;min-height:50px;padding:12px 20px}

/* --------------------------------------------------------------------------
   Bunnmeny på mobil

   Pillemenyen over bryter til tre linjer på telefon og spiser toppen av
   hver skjerm. Under 820px bytter vi den derfor med en flytende linje
   nederst med fire valg, og resten i en Mer-dialog. Ingenting ligger bak
   et ikon, alt har tekst.
   -------------------------------------------------------------------------- */
.bunnmeny{display:none}

@media(max-width:820px){
  .portalnav{display:none}

  .bunnmeny{
    display:flex;gap:4px;position:fixed;z-index:40;
    left:12px;right:12px;bottom:12px;
    background:var(--brand);border-radius:999px;padding:6px;
    box-shadow:0 8px 28px rgba(14,27,77,.32);
  }
  .bunnmeny button{
    flex:1 1 0;min-width:0;font:inherit;font-size:.78rem;font-weight:600;
    background:none;border:0;color:rgba(255,255,255,.78);cursor:pointer;
    padding:12px 6px;border-radius:999px;min-height:48px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .bunnmeny button[aria-current="true"]{background:#fff;color:var(--brand)}
  .bunnmeny .prikk{
    display:inline-block;margin-left:5px;background:var(--amber);color:#fff;
    font-size:.66rem;font-weight:600;border-radius:20px;padding:0 6px;
  }
  .bunnmeny button[aria-current="true"] .prikk{background:var(--brand);color:#fff}

  /* Plass til menyen, så den aldri dekker siste knapp på siden. */
  body{padding-bottom:96px}
  footer{margin-bottom:24px}
}

/* Mer-dialogen. Full liste med tekst, ingen ikoner. */
.ark{
  position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;
  background:rgba(19,26,46,.55);
}
.ark[hidden]{display:none}
.ark .arkinnhold{
  background:var(--card);width:100%;max-height:82vh;overflow:auto;
  border-radius:20px 20px 0 0;padding:26px 22px 34px;
}
.ark h3{margin:0 0 var(--luft-2)}
.ark .arkliste{display:grid;gap:10px;margin:0 0 var(--luft-2)}
.ark .arkliste button{
  font:inherit;font-size:1rem;font-weight:500;text-align:left;
  background:var(--card);color:var(--ink);border:2px solid var(--line-mork);
  border-radius:var(--radius-el);padding:15px 18px;min-height:54px;cursor:pointer;
}
.ark .arkliste button[aria-current="true"]{
  border-color:var(--brand);background:var(--brand-myk);color:var(--brand);font-weight:600;
}

/* --------------------------------------------------------------------------
   Adminpanelet, fast venstremeny

   Elleve valg i en toppmeny blir uleselig. Vi har seks, men en venstremeny
   holder når det vokser, og den frigjør toppen til det som krever handling.
   -------------------------------------------------------------------------- */
.appramme{display:block}

@media(min-width:900px){
  .appramme{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}
  .appramme > .hovedfelt{min-width:0}
}

.sidemeny{
  background:var(--card);border-right:1px solid var(--line);
  padding:20px 16px 30px;display:flex;flex-direction:column;
  /* Tre piksler er for tett. Menyvalgene løp sammen til én grå masse. */
  gap:7px;
}

/* Kortet øverst sier hvem du er logget inn som og hvilken runde det
   gjelder. Uten det starter menyen rett på en knapp og ser uferdig ut. */
.merkekort{
  display:flex;align-items:center;gap:12px;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:13px 15px;margin:0 0 var(--luft-3);text-decoration:none;color:var(--ink);
}
.merkekort img{width:34px;height:34px;flex:0 0 34px;border-radius:50%}
.merkekort span{min-width:0;flex:1 1 auto}
.merkekort:after{
  content:'';width:9px;height:9px;flex:0 0 9px;margin-left:4px;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg) translateY(-2px);
}
.merkekort b{display:block;font-weight:700;font-size:.95rem;line-height:1.3}
.merkekort em{
  display:block;font-style:normal;font-size:.78rem;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.sidemeny .bolk{
  font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint,var(--ink-soft));opacity:.75;padding:var(--luft-2) 12px 6px;margin:0;
}
.sidemeny button{
  position:relative;font:inherit;font-size:.93rem;font-weight:500;text-align:left;
  background:none;border:0;color:var(--ink-soft);cursor:pointer;
  padding:11px 14px;border-radius:12px;min-height:46px;
  display:flex;align-items:center;gap:12px;
}
.sidemeny button:hover{background:var(--paper);color:var(--ink)}
.sidemeny button[aria-current="true"]{
  background:#F0F0F3;color:var(--ink);font-weight:600;
}
.sidemeny button[aria-current="true"] .ikon{color:var(--brand)}
/* Streken flukter med kanten av menyen, ikke med knappen. */
.sidemeny button[aria-current="true"]:before{
  content:'';position:absolute;left:-16px;top:9px;bottom:9px;width:3px;
  background:var(--brand);border-radius:0 3px 3px 0;
}
.sidemeny .prikk{
  margin-left:auto;background:var(--amber);color:#fff;
  font-size:.7rem;font-weight:600;border-radius:20px;padding:1px 8px;
}
.sidemeny button[aria-current="true"] .prikk{background:var(--brand);color:#fff}
.sidemeny .bunnfelt{margin-top:auto;padding:var(--luft-3) 12px 0;font-size:.8rem;color:var(--ink-soft);line-height:1.5}

@media(max-width:899px){
  .sidemeny{
    border-right:0;border-bottom:1px solid var(--line);
    flex-direction:row;flex-wrap:wrap;align-items:center;padding:14px 20px;gap:0;
  }
  .merkekort{margin:0;width:100%;background:none;border:0;padding:0}
  .sidemeny > button,.sidemeny .bolk,.sidemeny .bunnfelt{display:none}
}

/* --------------------------------------------------------------------------
   Segmentvelger. Underdeling inne i en fane, når to visninger hører
   sammen men ikke fortjener hver sin plass i menyen.
   -------------------------------------------------------------------------- */
.segment{
  display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:5px;margin:0 0 var(--luft-3);max-width:100%;flex-wrap:wrap;
}
.segment button{
  font:inherit;font-size:.9rem;font-weight:500;border:0;background:none;
  color:var(--ink-soft);padding:9px 18px;border-radius:999px;cursor:pointer;min-height:42px;
  display:inline-flex;align-items:center;gap:8px;
}
.segment .ikon{width:17px;height:17px;flex:0 0 17px}
.segment .ikon svg{width:100%;height:100%}
.segment button:hover{color:var(--ink)}
.segment button[aria-current="true"]{background:var(--brand);color:#fff;font-weight:600}

/* --------------------------------------------------------------------------
   Tom tilstand. Aldri en tom flate, alltid hva som skjer videre.
   -------------------------------------------------------------------------- */
.tomstat{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px;padding:52px 24px;
}
.tomstat .ikon{
  width:54px;height:54px;border-radius:50%;background:var(--paper);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);margin-bottom:4px;
}
.tomstat .ikon svg{width:24px;height:24px}
.tomstat b{font-size:1.05rem;font-weight:700}
.tomstat p{color:var(--ink-soft);max-width:40ch;margin:0;font-size:.94rem;line-height:1.6}
.tomstat .handling{margin-top:8px}

/* --------------------------------------------------------------------------
   Halvmåler. Trybe bruker den til Approval Rate. Vi bruker den til
   godkjenningsrate, som er det eneste kvalitetstallet kreatøren styrer selv.
   -------------------------------------------------------------------------- */
.maaler{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.maaler svg{width:132px;height:auto;display:block}
.maaler .merk{font-size:.78rem;color:var(--ink-soft);text-align:center}
.maaler .bue-bak{stroke:var(--line)}
.maaler .bue-fram{stroke:var(--brand)}
.maaler .tallet2{
  font-family:inherit;font-weight:700;font-size:19px;fill:var(--ink);
  text-anchor:middle;letter-spacing:-.5px;
}

/* --------------------------------------------------------------------------
   Filterrad med piller, som Trybes Submissions.
   -------------------------------------------------------------------------- */
.filterrad{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 var(--luft-3)}
.filterrad button{
  font:inherit;font-size:.88rem;font-weight:500;cursor:pointer;
  background:var(--paper);color:var(--ink-soft);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:9px 16px;min-height:42px;
  display:inline-flex;align-items:center;gap:8px;
}
.filterrad button:hover{color:var(--ink);border-color:var(--line-mork)}
.filterrad button[aria-pressed="true"]{
  background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;
}
.filterrad .telling{
  font-size:.78rem;font-weight:600;opacity:.8;
}
.filterrad .hoyrestilt{margin-left:auto}

/* Fargeprikk foran statusfiltrene, som deres. */
.statusprikk{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.statusprikk.ny{background:var(--amber)}
.statusprikk.ok{background:var(--green)}
.statusprikk.endre{background:var(--violet)}
.statusprikk.nei{background:var(--red)}

/* --------------------------------------------------------------------------
   Topplinje. Merkepille til venstre, hjelp og brukerchip til høyre.
   Hentet rett fra Trybes Brand Portal og Creator Portal.
   -------------------------------------------------------------------------- */
.topplinje{
  position:sticky;top:0;z-index:45;background:var(--card);
  border-bottom:1px solid var(--line);
}
.topplinje .rad{
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;
}

/* ---------------------------------------------------- topplinja i egen fane
   Inne i Shopify er topplinja skjult — Shopify har sin egen rett over.
   I egen fane er den det øverste på skjermen, og da skal den bære merket
   i stedet for å se ut som en tynn strek noen glemte.

   Mørk flate, høyere rad, og lyse knapper som kan leses mot den. */
body.egen-fane .topplinje{
  background:var(--brand);border-bottom:1px solid var(--brand-mork);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
body.egen-fane .topplinje .rad{padding:18px 0}
/* Logoen er mørk marineblå. På en mørk topplinje forsvant den helt —
   den lå der, men var usynlig. Hvit flate bak løser det uten å røre
   selve bildet. */
body.egen-fane .topplinje .logo{
  width:38px;height:38px;flex:0 0 38px;background:#fff;padding:3px;
}
/* Helt ut i kanten. Topplinja er merkevaren, og da skal den ikke ligge
   inntrukket som om den var innhold i en spalte. */
body.egen-fane .topplinje .wrap{max-width:none;padding-left:22px;padding-right:22px}
body.egen-fane .topplinje .merkepille{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);
  color:#fff;font-size:.92rem;padding:8px 17px;letter-spacing:.01em;
}
body.egen-fane .topplinje .rundknapp{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff;
}
body.egen-fane .topplinje .rundknapp:hover{background:rgba(255,255,255,.2)}
body.egen-fane .topplinje .brukerchip{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff;
}
body.egen-fane .topplinje .brukerchip:hover{background:rgba(255,255,255,.2)}
body.egen-fane .topplinje .initialer{background:#fff;color:var(--brand)}
body.egen-fane .topplinje .navn2{color:#fff}

/* ------------------------------------------------------- panelets bunnlinje
   Bygget etter samme mønster som portalens, men enklere: panelet er et
   arbeidsverktøy, ikke en nettside å utforske. Den skal lukke siden, ikke
   invitere videre. */
.panelbunn{
  margin-top:auto;background:var(--brand);color:rgba(255,255,255,.62);
  border-top:1px solid var(--brand-mork);
}
.panelbunn .innhold{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:26px 0;
}
.panelbunn .merke{display:flex;align-items:center;gap:11px}
.panelbunn .merke img{width:30px;height:30px;border-radius:50%}
.panelbunn .merke b{color:#fff;font-size:.95rem;font-weight:700}
.panelbunn .merke span{display:block;font-size:.78rem;color:rgba(255,255,255,.55)}
.panelbunn .lenker{display:flex;gap:20px;flex-wrap:wrap;font-size:.84rem}
.panelbunn a{color:rgba(255,255,255,.72);text-decoration:none}
.panelbunn a:hover{color:#fff;text-decoration:underline}
.panelbunn .smaatt{font-size:.76rem;color:rgba(255,255,255,.45)}
body.i-shopify .panelbunn{display:none}
.topplinje .venstre,.topplinje .hoyre{display:flex;align-items:center;gap:10px;min-width:0}
.topplinje .logo{width:32px;height:32px;flex:0 0 32px;border-radius:50%}
.topplinje .merkepille{
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-size:.85rem;font-weight:600;white-space:nowrap;
}
.rundknapp{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;padding:0;
  border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.rundknapp:hover{border-color:var(--brand);color:var(--brand)}
.rundknapp svg{width:19px;height:19px}
.brukerchip{
  display:flex;align-items:center;gap:10px;background:none;border:0;font:inherit;
  cursor:pointer;padding:5px 10px 5px 5px;border-radius:999px;color:var(--ink);min-height:48px;
}
.brukerchip:hover{background:var(--paper)}
.brukerchip .initialer{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;
}
.brukerchip .navn2{font-weight:600;font-size:.9rem;white-space:nowrap}
.brukerchip:after{
  content:'';width:8px;height:8px;flex:0 0 8px;margin-left:2px;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg) translateY(-2px);
}
@media(max-width:600px){.topplinje .merkepille,.brukerchip .navn2{display:none}}

.brukermeny{position:relative}
.brukermeny .meny2{
  position:absolute;right:0;top:calc(100% + 8px);min-width:190px;padding:6px;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
}
.brukermeny .meny2[hidden]{display:none}
.brukermeny .meny2 p{
  margin:0;padding:10px 14px 8px;font-size:.8rem;color:var(--ink-soft);
  border-bottom:1px solid var(--line-soft);
}
.brukermeny .meny2 button{
  display:block;width:100%;text-align:left;font:inherit;font-size:.92rem;
  background:none;border:0;padding:11px 14px;border-radius:8px;cursor:pointer;
  color:var(--ink);min-height:44px;margin-top:4px;
}
.brukermeny .meny2 button:hover{background:var(--paper)}

/* --------------------------------------------------------------------------
   Velkomstkort. Trybes «Welcome, navn» øverst på kreatørflaten.
   -------------------------------------------------------------------------- */
.velkomstkort{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:18px 26px;margin:0 0 var(--luft-3);box-shadow:var(--shadow);
}
.velkomstkort .hilsen{font-size:.8rem;color:var(--ink-soft);margin:0 0 2px}
.velkomstkort .navn3{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.2}
.velkomstkort img{width:36px;height:36px;border-radius:50%;flex:0 0 36px}

/* --------------------------------------------------------------------------
   Sidemeny som eget kort, slik kreatørflaten deres er satt opp.
   -------------------------------------------------------------------------- */
@media(min-width:900px){
  .appramme.luftig{grid-template-columns:258px minmax(0,1fr);gap:22px;padding:22px 22px 22px 22px}
  .appramme.luftig .sidemeny{
    border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
    position:sticky;top:82px;padding:22px 14px 24px;

    /* Menyen fyller høyden i stedet for å stoppe under siste knapp.

       align-self:start gjorde den akkurat så høy som innholdet, og da lå
       det et hvitt kort på toppen av en grå flate — det så ut som noe som
       manglet under. Nå går den helt ned, og «Meld inn en levering» får
       en fast plass nederst i stedet for å flyte midt på.

       Sticky beholdes: menyen skal følge med når man ruller, ikke skli
       oppover og forsvinne. */
    align-self:stretch;
    min-height:calc(100vh - 82px - 22px);
  }
  .appramme.luftig .hovedfelt{min-width:0}
  .appramme.luftig .hovedfelt .wrap{padding-left:0;padding-right:0;max-width:none}
  .appramme.luftig .skjerm{padding-top:0}
}
.sidemeny .menytittel{
  font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.8;padding:0 12px var(--luft-2);margin:0;
}

/* Ikoner i menyen. Alltid sammen med tekst, aldri alene. */
.sidemeny button .ikon,.bunnmeny .ikon{width:20px;height:20px;flex:0 0 20px}
.sidemeny button .ikon svg,.bunnmeny .ikon svg{width:100%;height:100%}

/* --------------------------------------------------------------------------
   Veiviser. Ett spørsmål per skjerm, fremdrift på toppen, én knapp nederst.

   Mønsteret er hentet fra Trybe, og det er riktig for målgruppa vår: ingen
   lange skjemaer å scrolle gjennom, og alltid tydelig hvor langt du er
   kommet og hva neste trykk gjør.
   -------------------------------------------------------------------------- */
.fremdrift{position:fixed;top:0;left:0;right:0;height:5px;background:var(--line);z-index:50}
.fremdrift i{display:block;height:100%;background:var(--brand);transition:width .25s ease}
@media(prefers-reduced-motion:reduce){.fremdrift i{transition:none}}

.veitopp{display:flex;align-items:center;gap:16px;padding:26px 0 var(--luft-3)}
.veitopp .tilbake{margin:0}
.veitopp .steg{margin-left:auto;font-size:.85rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}

.veisteg{display:none}
.veisteg.pa{display:block}
.veisteg h2{font-size:1.7rem;max-width:16em}

/* Store, myke felt uten hard ramme, som i Trybes onboarding. */
.veisteg input[type=text],
.veisteg input[type=email],
.veisteg input[type=tel]{
  border-radius:var(--radius-pill);padding:19px 28px;min-height:62px;
  font-size:1.05rem;border-color:transparent;box-shadow:var(--shadow-lav);
}
.veisteg textarea{
  border-radius:22px;padding:19px 26px;border-color:transparent;box-shadow:var(--shadow-lav);
}
.veisteg .valg label{
  border-radius:18px;padding:19px 24px;border-color:transparent;box-shadow:var(--shadow-lav);
}
.veisteg input:focus-visible,.veisteg textarea:focus-visible{box-shadow:none}

/* Svak flatevask på veiviseren og innloggingen. Trybe har en varm
   fargeovergang her. Vi bruker vår egen marineblå, veldig nedtonet.
   Dette er det ene stedet spesifikasjonens «ingen gradienter» er fraveket. */
#kode,#login{
  background:
    radial-gradient(1100px 460px at 12% -8%, rgba(14,27,77,.075), transparent 62%),
    radial-gradient(880px 460px at 96% 4%, rgba(14,27,77,.05), transparent 62%);
}

/* Knappen står fast nederst, slik at den aldri må letes etter. */
.veibunn{position:sticky;bottom:0;background:var(--paper);padding:16px 0 24px;margin-top:var(--luft-4)}
.veibunn:before{content:'';display:block;height:1px;background:var(--line);margin:0 0 16px}

/* --------------------------------------------------------------------------
   Filmstripe. Videoer i rad, slik Trybe viser ukens beste.
   -------------------------------------------------------------------------- */
.filmstripe{display:flex;gap:12px;overflow-x:auto;padding:0 0 8px;margin:0}
.filmstripe > *{
  flex:0 0 116px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;
  background:var(--brand);border:1px solid var(--line);position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:12px 11px;cursor:pointer;text-align:left;
  font:inherit;color:#fff;text-decoration:none;
}
.filmstripe > *:hover{border-color:var(--brand-mork);background:var(--brand-mork)}
.filmstripe .merket2{
  font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.filmstripe b{font-size:.84rem;font-weight:600;line-height:1.35;margin-top:3px}

/* --------------------------------------------------------------------------
   Statistikkort med strekikon
   -------------------------------------------------------------------------- */
.statrad{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));margin:0}
.statrad > div{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-el);
  padding:18px 20px;display:flex;flex-direction:column;gap:4px;
}
.statrad .ikon{width:24px;height:24px;color:var(--brand);margin-bottom:8px}
.statrad .ikon svg{width:100%;height:100%}
.statrad b{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.statrad span{font-size:.84rem;color:var(--ink-soft);line-height:1.45}

/* --------------------------------------------------------------------------
   Radliste. Gruppert oppsett, brukt til kontakt.
   -------------------------------------------------------------------------- */
.rader{
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;margin:0 0 var(--luft-3);
}
.rader > *{
  display:flex;align-items:center;gap:14px;padding:17px 22px;min-height:62px;
  border:0;border-bottom:1px solid var(--line-soft);background:none;
  font:inherit;text-align:left;color:var(--ink);text-decoration:none;cursor:pointer;
}
.rader > :last-child{border-bottom:0}
.rader > :hover{background:var(--paper)}
.rader .ikon{width:22px;height:22px;flex:0 0 22px;color:var(--brand)}
.rader .ikon svg{width:100%;height:100%}
.rader .tekst{min-width:0}
.rader .tekst b{display:block;font-weight:600;font-size:.98rem}
.rader .tekst em{display:block;font-style:normal;font-size:.86rem;color:var(--ink-soft);margin-top:2px}
.rader .pil{margin-left:auto;color:var(--ink-soft);font-size:1.15rem;flex:0 0 auto}

/* Hovedhandling festet nederst i sidemenyen, som Trybes Create Content. */
/* «Meld inn en levering» skal stå like under menyvalgene, ikke nederst.
   margin-top:auto dyttet den til bunnen — det så riktig ut da menyen var
   like høy som innholdet, men da menyen ble full høyde havnet den så langt
   ned at ingen så den. Den viktigste knappen i portalen skal være der
   øyet allerede er. */
.sidemeny .hovedknapp{margin-top:var(--luft-3);padding-top:var(--luft-3)}
/* Det juridiske skyves derimot til bunnen, der det hører hjemme. */
.sidemeny .bunnfelt{margin-top:auto}
.sidemeny .hovedknapp + .bunnfelt{margin-top:var(--luft-2);padding-top:var(--luft-2);border-top:1px solid var(--line-soft)}
/* Må være mer spesifikk enn `.sidemeny button`, ellers arver den
   menyknappenes gjennomsiktige bakgrunn. */
.sidemeny .hovedknapp .btn{
  width:100%;min-height:50px;font-size:.94rem;padding:13px 18px;
  justify-content:center;border-radius:var(--radius-el);
  background:var(--brand);color:#fff;border:2px solid var(--brand);font-weight:600;
}
.sidemeny .hovedknapp .btn:hover{background:var(--brand-mork);border-color:var(--brand-mork);color:#fff}
@media(max-width:899px){.sidemeny .hovedknapp{display:none}}

/* --------------------------------------------------------------------------
   Bunn
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Handlingsstripe, brukt til angre og til bulkvurdering
   -------------------------------------------------------------------------- */
.stripe{
  position:sticky;bottom:0;z-index:30;
  background:var(--brand);color:#fff;border-radius:var(--radius-el);
  padding:16px 20px;margin:var(--luft-3) 0 0;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  box-shadow:0 8px 28px rgba(14,27,77,.28);
}
.stripe p{margin:0;font-size:.94rem;flex:1 1 auto;min-width:180px}
.stripe p b{font-weight:700}
.stripe .handling{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.5);margin:0;
}
.stripe .handling:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.stripe .handling.primar{background:#fff;color:var(--brand);border-color:#fff}
.stripe .handling.primar:hover{background:var(--brand-myk);color:var(--brand)}
.stripe input[type=text]{
  flex:1 1 220px;min-height:44px;padding:10px 14px;font-size:.92rem;
  border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#fff;
}
.stripe input[type=text]::placeholder{color:rgba(255,255,255,.65)}

td.velg{width:44px;padding-right:0}
td.velg input,th.velg input{width:20px;height:20px;accent-color:var(--brand);cursor:pointer}
tr.valgt{background:var(--brand-myk)}

/* --------------------------------------------------------------------------
   Video

   Vi laster ikke opp noe. Filene ligger i kreatørens Google Drive-mappe,
   og her bygger vi bare inn forhåndsvisningen. Mangler fil-IDen, viser vi
   en forklaring i riktig format i stedet for en tom eller død ramme.
   -------------------------------------------------------------------------- */
.videoramme{
  position:relative;width:100%;max-width:260px;aspect-ratio:9/16;
  border-radius:12px;overflow:hidden;background:#0C1330;
  border:1px solid var(--line);flex:0 0 auto;
}
.videoramme iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videoramme .mangler{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:8px;padding:22px;text-align:center;color:rgba(255,255,255,.72);font-size:.84rem;line-height:1.55;
}
.videoramme .mangler b{color:#fff;font-weight:600;display:block}
.videoramme.bred{max-width:100%;aspect-ratio:16/9}

/* --------------------------------------------------------------------------
   Skuff. Glir inn fra siden på desktop, dekker skjermen på mobil.
   Erstatter systemdialogene, som var den tydeligste grunnen til at
   panelet føltes uferdig.
   -------------------------------------------------------------------------- */
.skuff{
  position:fixed;inset:0;z-index:70;display:flex;justify-content:flex-end;
  background:rgba(12,19,48,.55);
}
.skuff[hidden]{display:none}
.skuffinnhold{
  background:var(--card);width:min(580px,100%);height:100%;overflow-y:auto;
  padding:28px 32px 40px;display:flex;flex-direction:column;gap:var(--luft-3);
}
.skuffhode{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.skuffhode h2{font-size:1.3rem;word-break:break-word}
.skuffhode .lukk{
  font:inherit;font-size:1.5rem;line-height:1;background:none;border:0;cursor:pointer;
  color:var(--ink-soft);padding:6px 10px;border-radius:8px;flex:0 0 auto;
}
.skuffhode .lukk:hover{background:var(--paper);color:var(--ink)}
.skuffrad{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.skuffrad .fakta2{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:12px}
.skuffrad .fakta2 div{display:flex;flex-direction:column;gap:2px}
.skuffrad .fakta2 dt,.skuffrad .fakta2 .merk{
  font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}
.skuffrad .fakta2 .verdi{font-size:.96rem;font-weight:600;word-break:break-word}

/* --------------------------------------------------------------------------
   Kommentartråd
   -------------------------------------------------------------------------- */
.trad{display:flex;flex-direction:column;gap:12px;margin:0}
.trad article{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
}
.trad article.fra-oss{background:var(--brand-myk);border-color:var(--brand-myk)}
.trad .hvem{
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  font-size:.76rem;color:var(--ink-soft);margin:0 0 6px;
}
.trad .hvem b{color:var(--ink);font-weight:600;font-size:.84rem}
.trad p{margin:0;font-size:.95rem;line-height:1.6}
.trad .tomt{color:var(--ink-soft);font-style:italic;font-size:.92rem}

/* --------------------------------------------------------------------------
   Annonsebibliotek
   -------------------------------------------------------------------------- */
.annonse{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:24px 26px;margin:0 0 18px;box-shadow:var(--shadow);
  display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;
}
.annonse .info{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px}
.annonse .tittelrad{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.annonse .tittelrad h3{margin:0;font-size:1.05rem;word-break:break-word}
.annonse .maal{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
  border-top:1px solid var(--line-soft);padding-top:14px;
}
.annonse .maal div{display:flex;flex-direction:column;gap:2px}
.annonse .maal .merk{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.annonse .maal .verdi{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.annonse .stempel{font-size:.78rem;color:var(--ink-soft)}
.annonse .stempel.gammel{color:var(--amber);font-weight:600}

/* --------------------------------------------------------------------------
   Analyse, brukt i inspirasjonsboardet
   -------------------------------------------------------------------------- */
.analyse{display:flex;flex-direction:column;gap:var(--luft-2);margin:0}
.analyse > div{display:flex;flex-direction:column;gap:5px}
.analyse .merk{
  font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--brand);
}
.analyse p{margin:0;font-size:.96rem;line-height:1.65}
.analyse ol{margin:0;padding-left:1.3em}
.analyse ol li{font-size:.96rem;margin-bottom:8px}

/* --------------------------------------------------------------------------
   Bunn
   -------------------------------------------------------------------------- */
footer{border-top:1px solid var(--line);margin-top:var(--luft-5);padding:30px 0 48px;font-size:.92rem;color:var(--ink-soft)}
footer a{color:var(--ink-soft)}
.eksempeldata{font-size:.85rem;color:var(--ink-soft);margin-top:var(--luft-2);font-style:italic}

/* --------------------------------------------------------------------------
   Respons og bevegelse
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .meny button:hover,.meny a:hover{transform:none}
}
@media(max-width:820px){
  :root{--luft-5:60px;--luft-4:36px}
}
@media(max-width:520px){
  body{font-size:17px}
  /* Navnet står allerede i hilsenen på hjem. På telefon er toppen for
     dyrebar til å bruke en hel linje på å gjenta det. */
  .portaltopp .rad{padding:12px 0;flex-wrap:nowrap}
  .portaltopp .hvemer{display:none}
  .portaltopp .logo{width:34px;height:34px;flex-basis:34px}
  .portaltopp .merke .navn{font-size:1rem}
  h1{font-size:1.8rem}
  h2{font-size:1.35rem}
  .wrap{padding:0 20px}
  .kort{padding:26px 22px}
  .panel{padding:24px 20px}
  .boks{padding:24px 22px}
  .meny button,.meny a{padding:24px 22px}
  .fakta div{padding:22px 24px}
  .btn{width:100%}
  .knapperad{flex-direction:column;gap:12px}
  .knapperad .btn{width:100%}
}
@media(max-width:380px){
  .wrap{padding:0 16px}
  .trinn li{padding-left:56px}
}


/* ==========================================================================
   Håndverkspass for panelet.

   Det som skiller en proff app-flate fra et dokument er tettheten: liten
   UI-tekst, lave rader, små etiketter uten rammer, og samme luft overalt.
   Alt under gjelder kun body.tett, altså adminpanelet.
   ========================================================================== */
body.tett{font-size:14px;line-height:1.5}
body.tett h2{font-size:1.3rem}
body.tett .note{font-size:.85rem;margin-bottom:18px}
body.tett .panel{padding:22px 26px;border-radius:16px}
body.tett .panel h2,body.tett .panel h3{font-size:1rem;font-weight:700;margin-bottom:2px}
body.tett .merlenke{font-size:.85rem}
body.tett .varsel{font-size:.88rem;padding:16px 22px;border-radius:14px}
body.tett .tomstat{padding:38px 20px}

/* Tabeller: lave rader, ingen linjebrekk i tall og datoer, stille hover. */
body.tett table{font-size:.84rem}
body.tett th{font-size:.78rem;padding-bottom:10px;font-weight:500}
body.tett td{padding:11px 14px 11px 0;white-space:nowrap;vertical-align:middle}
body.tett td.brytbar{white-space:normal;min-width:200px}
body.tett .rull tbody tr:hover td{background:#FAFAFB}

/* Etiketter og merker: små, uten rammer, som Trybes. */
body.tett .lapp{border:0;font-size:.72rem;padding:5px 11px}
body.tett .grep{width:22px;height:22px;line-height:19px;font-size:.68rem;border-width:1.5px}
body.tett .prikk{background:var(--brand);color:#fff}
body.tett .sidemeny button[aria-current="true"] .prikk{background:var(--brand);color:#fff}

/* Knapper: én størrelse for handlinger i rader, én for primærknapper. */
body.tett .handling{font-size:.8rem;min-height:34px;padding:7px 15px;margin:0 6px 0 0}
body.tett .btn{min-height:44px;font-size:.9rem;padding:11px 24px}
body.tett .filterrad button{min-height:38px;font-size:.82rem;padding:8px 15px}
body.tett .segment button{min-height:38px;font-size:.85rem;padding:8px 16px}
body.tett .sidemeny button{font-size:.88rem;min-height:42px;padding:10px 14px}

/* KPI-kort: mindre tall, strammere luft. */
body.tett .kpi{padding:18px 20px 20px}
body.tett .kpi .tallet{font-size:1.65rem}
body.tett .kpi .merk{font-size:.78rem;margin-bottom:8px}
body.tett .kpi .under{font-size:.76rem;margin-top:8px}
body.tett .kpier{gap:12px;grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}

/* Skuffen og dekningen følger samme skala. */
body.tett .skuffinnhold{padding:24px 28px 36px;gap:22px}
body.tett .dekning li{padding:11px 0}
body.tett .dekning .navnet em{font-size:.8rem}
body.tett .annonse{padding:20px 22px;gap:20px}
body.tett .annonse .maal .verdi{font-size:.95rem}
body.tett .annonse .maal .merk{font-size:.64rem}
body.tett .stempel{font-size:.74rem}


/* ==========================================================================
   Annonsebiblioteket, bygget som Metas Ad Library: rutenett av kort med
   status øverst, forhåndsvisningen i midten, og det biblioteket ikke har,
   tallene våre, rett under forhåndsvisningen.
   ========================================================================== */
.adgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start}
.adkort{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 16px 18px;display:flex;flex-direction:column;gap:12px;
}
.adkort .adtopp{display:flex;align-items:center;justify-content:space-between;gap:10px}
.adkort .admeta{font-size:.76rem;color:var(--ink-soft);line-height:1.55;margin:0}
.adkort .adknapp{
  font:inherit;font-size:.82rem;font-weight:600;width:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:9px 12px;cursor:pointer;color:var(--ink);min-height:38px;
}
.adkort .adknapp:hover{border-color:var(--line-mork)}
.adkort .adhode{
  display:flex;gap:10px;align-items:center;
  border-top:1px solid var(--line-soft);padding-top:12px;
}
.adkort .adhode img{width:34px;height:34px;border-radius:50%;flex:0 0 34px}
.adkort .adhode b{display:block;font-size:.86rem;line-height:1.25}
.adkort .adhode em{font-style:normal;font-size:.74rem;color:var(--ink-soft)}
.adkort .adtekst{font-size:.82rem;line-height:1.5;margin:0}
.adkort .videoramme{width:100%;max-width:240px;align-self:center}
.adkort .admaal{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px 12px;
  border-top:1px solid var(--line-soft);padding-top:12px;
}
.adkort .admaal div{display:flex;flex-direction:column;gap:2px;min-width:0}
.adkort .admaal .merk{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.adkort .admaal .verdi{font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums}
.adkort .adbunn{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:.74rem;color:var(--ink-soft);
}
.adkort .adbunn .gammel{color:#B8860B;font-weight:600}

/* --------------------------------------------------------------------------
   Periodevelger, som datovelgeren øverst i Shopify-adminen. Faste forslag
   pluss egendefinert fra-til. Panelet tegnes på nytt når valget endres.
   -------------------------------------------------------------------------- */
.periode{position:relative;display:inline-block;flex:0 0 auto}
.periodeknapp{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:8px 34px 8px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  font-weight:600;font-size:.88rem;line-height:1;font-family:inherit;color:var(--ink);cursor:pointer;
  box-shadow:var(--shadow-lav);position:relative;white-space:nowrap;
}
.periodeknapp::after{
  content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:translateY(-70%) rotate(45deg);
}
.periodeknapp:hover{border-color:var(--brand)}
.periodemeny{
  position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:270px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:10px;box-shadow:0 12px 32px rgba(14,27,77,.16);text-align:left;
}
#periode-forslag button{
  display:block;width:100%;text-align:left;padding:9px 12px;margin:0;
  background:none;border:0;border-radius:9px;cursor:pointer;
  font-weight:500;font-size:.88rem;line-height:1.2;font-family:inherit;color:var(--ink);
}
#periode-forslag button:hover{background:var(--paper)}
#periode-forslag button[aria-current="true"]{background:#F0F0F3;font-weight:600}
.periodemeny .egendef{
  display:flex;gap:10px;margin:10px 2px 12px;padding-top:12px;
  border-top:1px solid var(--line);
}
.periodemeny .egendef .felt{margin:0;flex:1 1 0;min-width:0}
.periodemeny .egendef label{font-size:.72rem}
.periodemeny .egendef input{min-height:38px;padding:6px 10px;font-size:.84rem;width:100%}
.periodemeny .knapper{display:flex;justify-content:flex-end;gap:8px;padding:0 2px 2px}
.periodemeny .knapper .handling{margin:0}
.admaal .tomtall{
  grid-column:1/-1;margin:0;padding:6px 2px;
  font-size:.8rem;color:var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Pulsraden på Oversikt, etter mønsteret fra hjemskjermen i Shopify-adminen.
   Én stripe øverst med det ferskeste døgnet og endringen fra dagen før.
   -------------------------------------------------------------------------- */
.puls{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:20px 24px 16px;margin:0 0 var(--luft-3);box-shadow:var(--shadow-lav);
}
.pulstopp{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pulstopp b{font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.levende{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.8rem;font-weight:600;color:var(--ink-soft);
}
.levende i{
  width:7px;height:7px;border-radius:50%;background:#17C964;flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(23,201,100,.18);
}
.pulstall{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin:16px 0 0;border-top:1px solid var(--line);padding-top:14px;
}
.pulscelle{display:flex;flex-direction:column;gap:3px;padding:0 18px;border-left:1px solid var(--line)}
.pulscelle:first-child{padding-left:0;border-left:0}
.pulscelle .merk{
  font-size:.74rem;font-weight:600;color:var(--ink-soft);
  text-transform:none;letter-spacing:0;
}
.pulscelle .verdi{font-size:1.34rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.delta{font-size:.74rem;font-weight:600;margin-top:1px}
.delta.opp{color:var(--green)}
.delta.ned{color:var(--red)}
.delta.flat{color:var(--ink-soft)}
.pulsfot{margin:14px 0 0;font-size:.76rem;color:var(--ink-soft);line-height:1.5}

@media(max-width:760px){
  .pulstall{grid-template-columns:1fr 1fr;gap:16px 0}
  .pulscelle:nth-child(odd){padding-left:0;border-left:0}
}

/* --------------------------------------------------------------------------
   Visning inne i Shopify-adminen.

   Shopify gir oss allerede en topplinje, en sidemeny og en butikkvelger.
   Gjentar vi alt det inni innholdsflaten, får brukeren to menyer ved
   siden av hverandre og to logoer. Derfor felles vår egen topplinje og
   merkekortet her, og sidemenyen legges om til en vannrett fanerad slik
   Shopify-apper flest ser ut. Samme knapper, samme merker, samme
   hendelser: bare CSS skiller de to visningene, så det finnes ingen
   parallell meny å holde i sync.
   -------------------------------------------------------------------------- */
body.i-shopify{background:transparent}
body.i-shopify .topplinje{display:none}
body.i-shopify .bunnmeny{display:none}

/* Ut av tokolonners oppsett, faneraden ligger over innholdet. */
body.i-shopify .appramme{display:block;min-height:0}

body.i-shopify .sidemeny{
  flex-direction:row;align-items:center;gap:2px;
  background:transparent;border-right:0;border-bottom:1px solid var(--line);
  padding:0 0 0;margin:0 0 var(--luft-3);
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
body.i-shopify .sidemeny::-webkit-scrollbar{display:none}

/* Butikken står allerede øverst i Shopify, og «Administrasjon» som
   overskrift gir ikke mening liggende midt i en fanerad. */
body.i-shopify .merkekort,
body.i-shopify .sidemeny .bolk,
body.i-shopify .sidemeny .bunnfelt,
body.i-shopify .sidemeny .hovedknapp{display:none}

body.i-shopify .sidemeny button{
  flex:0 0 auto;border-radius:0;min-height:40px;padding:9px 14px;
  font-size:.9rem;gap:8px;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
body.i-shopify .sidemeny button:hover{background:transparent;color:var(--ink)}
body.i-shopify .sidemeny button[aria-current="true"]{
  background:transparent;color:var(--brand);font-weight:600;
  border-bottom-color:var(--brand);
}
/* Kantstreken fra sidemenyen hører ikke hjemme på en fane. */
body.i-shopify .sidemeny button[aria-current="true"]:before{display:none}
body.i-shopify .sidemeny .prikk{margin-left:2px}

/* Shopify rammer inn appen selv, så den loddrette luften vår blir
   dobbel. Den vannrette skal derimot BEHOLDES: uten den klistrer
   overskriftene seg inntil Shopifys venstremeny og blir nesten
   uleselige. Vi slipper bare taket på maksbredden, så innholdet får
   bruke plassen Shopify gir oss. */
body.i-shopify .hovedfelt{padding-top:0}
body.i-shopify .skjerm{padding-top:0;padding-bottom:var(--luft-4)}
body.i-shopify .wrap{max-width:none;padding-left:var(--luft-3);padding-right:var(--luft-3)}

/* ---------------------------------------------------------------- egen fane
   Panelet i sitt eget vindu, ikke i Shopifys ramme.

   Breddene over er tegnet for rammen: 740 px for tekstskjermer, 1200 for
   tabellene. I en tom 27-tommer ble de stående som en smal stripe midt på
   skjermen, med tabeller som måtte rulles sidelengs selv om det var
   hundrevis av piksler ledig rundt.

   Her løftes taket, men ikke bort. Uten et tak blir tekstlinjene så lange
   at øyet mister linja på vei tilbake — 1560 er romslig for tabeller og
   kortrader, 900 nok for skjermene som mest er tekst. Sidemenyen ligger
   utenfor og styrer seg selv. */
body.egen-fane .wrap{max-width:1040px}

/* Tabellskjermene får nesten hele flaten. Taket er satt så høyt at det
   sjelden treffer på en vanlig skjerm — men det finnes, fordi en tabell
   som er to meter bred på en ultrabred skjerm ikke er lettere å lese,
   bare lengre å flytte øynene over. */
body.egen-fane .wrap.bred{max-width:min(2000px, 94vw)}

@media (min-width:1400px){
  body.egen-fane .wrap{padding-left:40px;padding-right:40px}
}

/* Med mer bredde å gå på tåler KPI-radene og rutenettene flere spalter
   før de brekker. Uten dette ble de stående som fire brede kort med
   store tomrom i, i stedet for å bruke plassen. */
@media (min-width:1500px){
  body.egen-fane .kpier{grid-template-columns:repeat(5,1fr)}
  body.egen-fane .rutenett.to{grid-template-columns:1fr 1fr}
}
@media (min-width:1800px){
  body.egen-fane .vekstrad{grid-template-columns:repeat(3,1fr)}
}
body.i-shopify .sidemeny{padding-left:var(--luft-3);padding-right:var(--luft-3)}

@media(max-width:899px){
  body.i-shopify .sidemeny{flex-wrap:nowrap;padding:0}
}

/* Forhåndsvisning fra Meta. Samme 9:16-ramme som Drive-videoene, så
   rutenettet ikke hopper mellom kort med og uten video. */
.adbilde{
  position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;
  border-radius:14px;background:var(--brand);margin:0 0 14px;
}
.adbilde img{width:100%;height:100%;object-fit:cover;display:block}

/* Kampanje- og annonsesettvelger. Ligger som en egen rad over rutenettet,
   ikke i periodemenyen, fordi de svarer på ulike spørsmål: perioden sier
   NÅR, strukturen sier HVILKE. */
.strukturrad{
  display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;
  margin:0 0 var(--luft-3);
}
.strukturrad .felt{margin:0;min-width:220px;flex:0 1 300px}
.strukturrad .felt label{font-size:.74rem}
.strukturrad select{min-height:40px;padding:8px 12px;font-size:.88rem}
.strukturnote{
  margin:0 0 10px;font-size:.78rem;color:var(--ink-soft);
  flex:1 1 200px;line-height:1.5;
}

/* --------------------------------------------------------------------------
   Forhåndsvisning av annonsen, hentet ferdig gjengitt fra Meta.
   -------------------------------------------------------------------------- */
.adbilde.klikkbar{cursor:pointer}
.adbilde.klikkbar:hover img{transform:scale(1.03)}
.adbilde img{transition:transform .25s ease}
/* Ingen avspillknapp oppå bildet. Hele bildet er klikkflaten, og en
   knapp midt i motivet skjuler nettopp det man vil se. */

.visningsrute{
  position:fixed;inset:0;z-index:200;background:rgba(14,27,77,.55);
  display:flex;align-items:center;justify-content:center;padding:24px;
  overflow-y:auto;
}
.visningsrute[hidden]{display:none}
.visningskort{
  background:var(--card);border-radius:var(--radius-card);
  padding:28px;max-width:960px;width:100%;
  box-shadow:0 20px 60px rgba(14,27,77,.3);
}
/* Annonsen til venstre, tallene til høyre. Annonsen har fast bredde
   fra Meta, så den får akkurat plassen sin, og tallene tar resten.
   Under 800 px stables de, ellers blir kolonnene for smale til å lese. */
.visningskropp{display:flex;gap:30px;align-items:flex-start;flex-wrap:wrap}
.visningsfakta{
  flex:1 1 400px;min-width:0;
  display:flex;flex-direction:column;gap:22px;
}
.vbolk h4{
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 10px;
}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 20px}
.vgrid.bred{grid-template-columns:repeat(2,1fr)}
.vfelt{display:flex;flex-direction:column;gap:2px;min-width:0}
.vfelt .merk{font-size:.72rem;color:var(--ink-soft)}
.vfelt .verdi{
  font-size:1rem;font-weight:700;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;
}
.vfelt .verdi.bestatt{color:var(--green)}
.vfelt .verdi.stryk{color:var(--red)}
.vfelt .verdi.midt{color:var(--amber)}
@media(max-width:560px){.vgrid{grid-template-columns:repeat(2,1fr)}}
.visningstopp{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.visningstopp h3{font-size:1.02rem;margin:0 0 3px}
.visningstopp p{margin:0;font-size:.78rem;color:var(--ink-soft)}
.visningstopp .handling{margin:0;flex:0 0 auto}
/* Metas iframe er 335x450. Vi lar den beholde sitt eget forhold og
   sentrerer den, i stedet for å strekke den til noe den ikke er. */
/* Metas iframe er 335 px bred, og den bredden er fast. Høyden bestemmer
   derimot VI: rammen leverer en hel side, og gir vi den for lite plass,
   må man scrolle inne i selve annonsen for å se reaksjoner, kommentarer
   og delinger. Vi gir den nok høyde til at hele innlegget er synlig med
   én gang. */
.visningsramme{flex:0 0 335px}
@media(max-width:800px){
  .visningsramme{flex:1 1 100%;display:flex;justify-content:center}
}
.visningsramme iframe{
  width:335px;height:760px;border:0;border-radius:12px;display:block;
}
/* Er skjermen for lav til hele annonsen, scroller kortet i stedet for at
   annonsen får en scrollbar inni seg. */
.visningskort{max-height:92vh;overflow-y:auto}
.visningsfot{margin:14px 0 0;font-size:.75rem;color:var(--ink-soft);text-align:center}


/* --------------------------------------------------------------------------
   Metas ekte forhåndsvisning i selve kortet.

   Erstatter vår egen etterligning for annonser der Meta gir oss en. Da
   slipper vi 64x64-miniatyren som ble grøt oppskalert, og kortet viser
   annonsen slik den faktisk er. Iframen skaleres ned for å passe kortet.
   -------------------------------------------------------------------------- */
.adekte{
  /* INGEN fast aspect-ratio. Annonsene har ulik høyde — en video med
     lang tekst er høyere enn et bilde med kort — og et fast format ville
     klippet bunnen av noen og gitt tomrom under andre. Høyden settes i
     stedet av skaleringsløkka, ut fra hvor høy rammen faktisk er. */
  position:relative;width:100%;overflow:hidden;
  border-radius:14px;margin:0 0 14px;cursor:pointer;background:var(--paper);
  min-height:120px;
}
.adekte iframe{
  position:absolute;left:0;top:0;width:335px;height:var(--rammehoyde,620px);
  border:0;transform-origin:top left;pointer-events:none;
}
/* Gjennomsiktig lag som fanger klikket. Uten det ville iframen spist
   det, og Meta ville åpnet sin egen lenke i stedet for vårt vindu. */
.adekte-lag{position:absolute;inset:0;background:transparent}
.adekte:hover{box-shadow:0 0 0 2px var(--brand)}

/* Merkelogoene arver farge som resten av ikonene, så de trenger ingen
   særbehandling. Beholdt som tom regel for å slippe å lete etter den
   igjen hvis noen senere vil gi dem egne farger. */

/* ==========================================================================
   Profilen til kreatøren, og småting innloggingen trenger.

   Bildet vises som en sirkel med initialen under. Har hun ikke lagt inn
   noe bilde, ER initialen visningen, ikke en tom grå flate med et
   kameraikon. En tom plassholder ser ut som noe som mangler; en initial
   ser ut som en avgjørelse.
   ========================================================================== */

.profilrad{display:flex;gap:20px;align-items:flex-start}
@media(max-width:520px){.profilrad{flex-direction:column;gap:16px}}

.profilbilde{
  width:88px;height:88px;flex:0 0 88px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.9rem;overflow:hidden;
  background-size:cover;background-position:center;
}
/* Er det lagt inn et bilde, settes det som bakgrunn, og initialen skal
   ikke skinne gjennom under det. */
.profilbilde.har-bilde{color:transparent}

.profilbilde-valg{flex:1;min-width:0}
.profilbilde-valg p{margin:0 0 4px}

/* Brukerchipen i topplinja viser samme bilde i lite format. */
.brukerchip .initialer.har-bilde{
  color:transparent;background-size:cover;background-position:center;
}

.valgfritt{
  font-weight:500;font-size:.78rem;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:2px 9px;margin-left:8px;
  vertical-align:middle;
}

.kvittert{
  margin:12px 0 0;color:var(--green);font-weight:600;font-size:.92rem;
}

/* Innloggingen bytter mellom tre steg i samme kort. Uten dette hopper
   knappen litt når teksten over bytter lengde. */
#login form{margin:0}

/* --- kreatørtabellen i panelet ------------------------------------------
   Bildet er 64 piksler fra kreatørens egen opplasting. Har hun ikke lagt
   inn noe, står initialen i samme sirkel. Aldri en tom flate.
   ----------------------------------------------------------------------- */
.navncelle{display:flex;align-items:center;gap:10px}
.minibilde{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.72rem;
  background-size:cover;background-position:center;
}
.minibilde.har-bilde{color:transparent}

.kontaktcelle{display:flex;flex-direction:column;gap:2px;font-size:.86rem}
.kontaktcelle a{color:var(--ink-soft);text-decoration:none}
.kontaktcelle a:hover{color:var(--brand);text-decoration:underline}

/* Invitasjonskoden vises én eneste gang, rett etter at den er laget.
   Den er stor og monospace fordi den skal leses opp eller kopieres, og
   markerbar fordi det første man gjør er å ta en kopi. */
.engangskode-vist{margin:14px 0 0;text-align:center}
.engangskode-vist code{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.5rem;font-weight:700;letter-spacing:.14em;
  background:var(--brand-myk);border:1px solid var(--line);
  border-radius:var(--radius-el);padding:14px 22px;user-select:all;
}

/* ==========================================================================
   Innloggingskortet.

   Ett kort midt på flaten, med logoen øverst. Dette er det første, og for
   mange det eneste, en kreatør ser av oss før hun er inne. Det skal se ut
   som en dør inn til noe som er ryddig, ikke som et skjema.
   ========================================================================== */

.loginside{
  min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;padding:32px 20px;gap:20px;
}
/* Sentrering med auto-marger, ikke justify-content:center.

   Forskjellen betyr noe: er kortet høyere enn vinduet, klipper
   justify-content toppen bort, og den delen kan ikke rulles fram igjen.
   Auto-marger faller til null når plassen tar slutt, så kortet begynner
   pent på toppen i stedet. Det slår inn på små telefoner i liggende
   stilling, og på delte vinduer. */
.loginside > :first-child{margin-top:auto}
.loginside > :last-child{margin-bottom:auto}
.loginkort{
  width:100%;max-width:440px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:40px 34px 32px;
}
@media(max-width:520px){
  .loginside{justify-content:flex-start;padding-top:44px}
  .loginkort{padding:32px 22px 26px;border:0;box-shadow:none;background:transparent}
}

.loginlogo{
  width:54px;height:54px;border-radius:50%;display:block;
  margin:0 0 20px;object-fit:cover;
}
.loginkort h1{font-size:1.75rem;margin:0 0 10px;letter-spacing:-.02em}
.loginkort .eyebrow{margin:0 0 4px}
.loginkort .lead{font-size:1rem;margin:0 0 24px;color:var(--ink-soft)}
.loginkort .felt{margin-bottom:16px}
.loginkort .hint{margin:14px 0 0;font-size:.86rem}
.loginkort .feilmelding:empty{display:none}

/* Feltene der en kode skrives. Store tegn med luft mellom, fordi det som
   skal inn er tegn for tegn fra en e-post, ikke et ord man kan gjette
   seg til. Monospace så en 6-er ikke forveksles med en G. */
.kodefelt{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.25rem;letter-spacing:.16em;text-align:center;
}
.kodefelt.sifre{font-size:1.7rem;letter-spacing:.42em;text-indent:.42em}

/* Skillelinje med tekst i midten, over invitasjonsknappen. */
.loginskille{
  display:flex;align-items:center;gap:14px;
  margin:26px 0 14px;color:var(--ink-soft);font-size:.84rem;
}
.loginskille:before,.loginskille:after{
  content:'';flex:1;height:1px;background:var(--line);
}

.loginbunn{
  margin:0;font-size:.8rem;color:var(--ink-soft);text-align:center;
}

/* ==========================================================================
   Filopplasting.

   Slippsonen er stor med vilje. Dette er handlingen kreatøren kom for å
   gjøre, og den skal ikke se ut som et vedleggsfelt i et skjema.
   ========================================================================== */

.slippsone{
  border:2px dashed var(--line-mork);border-radius:var(--radius-el);
  background:var(--paper);padding:28px 20px;text-align:center;
  transition:border-color .15s, background .15s;
}
.slippsone.over{border-color:var(--brand);background:var(--brand-myk)}
.slippsone .hjelp{margin:0;text-align:center;max-width:none}
/* Slippsonen sentrerer alt sitt eget, og nullstiller breddegrensa.

   .felt .hjelp har max-width:44em for lesbarhet i skjemaer. Inne i
   slippsonen ga det en smal boks til venstre, med teksten pent sentrert
   inni SEG SELV — så «eller» havnet 130 piksler fra der den skulle. Det
   var ikke tekstjusteringen som var feil, det var boksbredden.

   Sonen skal se lik ut i skjemaet og på filområdet. */
.slippsone,.slippsone p,.slippsone .knapperad{text-align:center}
.slippsone .hjelp,.slippsone p{max-width:none;margin-left:auto;margin-right:auto}
.slippsone .knapperad{justify-content:center}

.filliste{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.filliste li{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-el);padding:14px 16px;
  display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;
}
.filliste .filnavn{min-width:0}
.filliste .filnavn b{
  display:block;font-weight:600;font-size:.94rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.filliste .filnavn span{font-size:.82rem;color:var(--ink-soft)}
.filliste .filstatus{
  font-size:.84rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Stolpa ligger over hele bredden, under navnet. */
.filliste .filstolpe{
  grid-column:1 / -1;height:6px;border-radius:999px;
  background:var(--line);overflow:hidden;
}
.filliste .filstolpe i{
  display:block;height:100%;width:0;background:var(--brand);
  border-radius:999px;transition:width .2s;
}

.filliste li.ferdig{border-color:var(--green-line);background:var(--green-bg)}
.filliste li.ferdig .filstolpe i{background:var(--green)}
.filliste li.ferdig .filstatus{color:var(--green);font-weight:600}

.filliste li.feilet{border-color:var(--red-line);background:var(--red-bg)}
.filliste li.feilet .filstolpe i{background:var(--red)}
.filliste li.feilet .filstatus{color:var(--red);font-weight:600}

/* ==========================================================================
   Filområdet: stor slippsone, brødsmulesti og innholdsliste.
   ========================================================================== */

/* Den store ruta. Høy og luftig fordi dette ER handlingen på skjermen,
   ikke et vedleggsfelt nederst i et skjema. */
.slippsone.stor{
  padding:52px 24px;border-width:2px;
}
.slippsone .slippikon{
  display:block;width:52px;height:52px;margin:0 auto 16px;
  border-radius:50%;background:var(--brand-myk);
  display:flex;align-items:center;justify-content:center;
}
.slippsone .slippikon svg{width:26px;height:26px;color:var(--brand)}
.slippsone .slipptittel{
  margin:0 0 2px;font-weight:700;font-size:1.1rem;color:var(--ink);
}
.slippsone.over .slippikon{background:#fff}

/* Brødsmulestien. Sist ledd er fet og ikke klikkbart. */
.filsti{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:0 0 16px;font-size:.92rem;
}
.filsti button{
  background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--brand);text-decoration:underline;
}
.filsti button:hover{color:var(--brand-mork)}
.filsti .skille{color:var(--ink-soft)}
.filsti b{font-weight:600}

/* Innholdet i mappa. Mapper er knapper, filer er rader. */
.drivliste{display:grid;gap:8px;margin-top:20px}
.drivmappe,.drivfil{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-el);padding:14px 16px;font:inherit;color:var(--ink);
}
.drivmappe{cursor:pointer}
.drivmappe:hover{border-color:var(--brand);background:var(--brand-myk)}
.drivmappe .ikon,.drivfil .ikon{
  flex:0 0 22px;width:22px;height:22px;color:var(--ink-soft);
}
.drivmappe .ikon svg,.drivfil .ikon svg{width:22px;height:22px}
.drivmappe .ikon{color:var(--brand)}
.drivmappe .tekst,.drivfil .tekst{flex:1;min-width:0}
.drivmappe b,.drivfil b{
  display:block;font-weight:600;font-size:.94rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.drivmappe em,.drivfil em{
  font-style:normal;font-size:.82rem;color:var(--ink-soft);
}
.drivmappe .pil{color:var(--ink-soft);font-size:1.3rem;line-height:1}

/* Svaret fra Claude. Skal se ut som noe som er skrevet til deg, ikke som
   en rapport klistret inn i siden. */
.aisvar{
  background:var(--brand-myk);border:1px solid var(--line);
  border-radius:var(--radius-el);padding:24px;
}
.aitopp{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand);
}
.aitopp svg{width:17px;height:17px}
.aikort{margin:0 0 20px;font-size:1.08rem;font-weight:600;line-height:1.5}

.aipunkter{list-style:none;margin:0;padding:0;counter-reset:aip;display:grid;gap:14px}
.aipunkter li{
  position:relative;padding-left:38px;counter-increment:aip;
}
.aipunkter li:before{
  content:counter(aip);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;
}
.aipunkter b{display:block;font-weight:600;margin-bottom:2px}
.aipunkter span{color:var(--ink-soft);font-size:.94rem;line-height:1.6}

.aiproev{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line-mork);
}
.aiproev .merk{
  margin:0 0 8px;font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);
}
.aiproev ul{margin:0;padding-left:20px;display:grid;gap:6px}
.aiproev li{font-size:.94rem}

/* Annonsen i stort format. Metas ramme er 335 piksler bred og skal ikke
   skaleres her — den får plassen den er laget for. */
.adstort-innhold{max-width:400px}
#adstort-ramme{
  background:var(--paper);border-radius:var(--radius-el);
  overflow:hidden;margin-bottom:16px;
}
#adstort-ramme iframe{
  width:335px;height:78vh;max-height:900px;border:0;display:block;margin:0 auto;
}

/* --- AI-merket -----------------------------------------------------------
   Det eneste fargede elementet i portalen utenom logoene. Det er poenget:
   kreatøren skal se på et halvt sekund at dette er noe annet enn resten av
   siden, uten å lese teksten først.
   ------------------------------------------------------------------------ */
.aiikon{display:inline-flex;align-items:center;flex:0 0 auto}
.aiikon svg{width:18px;height:18px;display:block}

.aiknapp{display:inline-flex;align-items:center;gap:9px}
.aiknapp .aiikon svg{width:19px;height:19px}
.aiknapp:hover{border-color:var(--brand)}

.aitopp .aiikon svg{width:19px;height:19px}

/* Mens Claude tenker. Gnisten pulserer svakt, så det er tydelig at noe
   skjer og ikke at siden har hengt seg. */
.aitenker{
  display:flex;align-items:center;gap:10px;margin:0;
  font-size:.94rem;color:var(--ink-soft);
}
.aitenker .aiikon svg{width:20px;height:20px;animation:aipuls 1.6s ease-in-out infinite}
@keyframes aipuls{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.88)}
}
@media(prefers-reduced-motion:reduce){
  .aitenker .aiikon svg{animation:none}
}

/* ==========================================================================
   Inspirasjon: ett rutenett, to slags kort.

   Et kuratert eksempel og en kreatørvideo som kjører nå ser like ut med
   vilje. Kreatøren skal ikke måtte forstå forskjellen for å vite hvor hun
   skal se — begge er noe hun kan lære av. Forskjellen står som en lapp på
   kortet, ikke som to atskilte seksjoner.
   ========================================================================== */

/* Fire i bredden. auto-fill med en minstebredde ga fem eller seks smale
   spalter på en vid skjerm, og da ble hvert kort for lite til å se hva som
   skjer i klippet. Fire er antallet vi faktisk viser, så rutenettet er satt
   til fire — og trappes ned etter hvert som det blir trangere. */
.inspgrid{
  display:grid;gap:18px;margin:0;
  grid-template-columns:repeat(4,1fr);
}
@media(max-width:1000px){.inspgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.inspgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.inspgrid{grid-template-columns:1fr}}
.inspkort{
  display:block;width:100%;text-align:left;padding:0;font:inherit;color:inherit;
  background:none;border:0;cursor:pointer;
}
.inspkort .ramme{
  display:block;position:relative;aspect-ratio:9/16;overflow:hidden;
  border-radius:var(--radius-el);background:var(--brand-myk);
  border:2px solid transparent;transition:border-color .15s;
}
.inspkort img{width:100%;height:100%;object-fit:cover;display:block}

/* Metas forhåndsvisning er en iframe med fast bredde. Den skaleres av
   JavaScript, og et gjennomsiktig lag over fanger klikket — ellers ville
   iframen spist det og åpnet Facebook i stedet for kortet vårt. */
.inspkort .ramme iframe{
  position:absolute;left:0;top:0;width:335px;height:640px;
  border:0;transform-origin:top left;pointer-events:none;
}
.inspkort .ramme .lag{position:absolute;inset:0;background:transparent}

.inspkort .ingenvideo{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--brand);opacity:.3;
}
.inspkort .ingenvideo svg{width:34px;height:34px}

.inspkort .under{display:block;padding:10px 2px 0}
.inspkort .under b{display:block;font-weight:600;font-size:.92rem;line-height:1.35}
.inspkort .under em{
  font-style:normal;font-size:.8rem;color:var(--ink-soft);
  display:block;margin-top:2px;
}
.inspkort:hover .ramme{border-color:var(--line-mork)}
.inspkort.valgt .ramme{border-color:var(--brand)}

/* Innholdet til høyre i vinduet. Panelet har tallene her; kreatøren har
   forklaringen. Samme ramme, ulikt innhold. */
.ivtekst{margin:0 0 18px;font-size:1.02rem;line-height:1.65}
.ivvariant{
  background:var(--brand-myk);border-radius:var(--radius-el);
  padding:16px 18px;margin:0 0 22px;
}
.ivvariant .merk{
  margin:0 0 6px;font-size:.74rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand);
}
.ivvariant p:last-child{margin:0;font-size:.95rem;line-height:1.6}
#iv-innhold .aisvar{margin-top:4px}

/* --------------------------------------------------------------------------
   Nedbrytningen trenger bredden, ikke høyden.

   Metas ramme er låst til 335 piksler. Med et kort på 960 fikk analysen
   rundt 540 igjen, og fem punkter med råd under ble en meter tekst man
   måtte rulle gjennom. Kreatøren så aldri hele bildet samtidig.

   To grep: kortet får mer plass på store skjermer, og punktene legger seg
   i to spalter når det FAKTISK er rom for det. auto-fit gjør at de faller
   tilbake til én spalte av seg selv på mobil, uten et eneste bruddpunkt å
   vedlikeholde.

   Alt er bundet til #insp-visning med vilje. Panelet bruker de samme
   klassene, og der er tallkolonnene satt opp for en annen bredde.
   -------------------------------------------------------------------------- */
#insp-visning .visningskort{max-width:1240px}

#iv-innhold .aipunkter{
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px 28px;
}
#iv-innhold .aiproev ul{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:8px 26px;
}
/* Sammendraget og overskriftene skal ligge over hele bredden, ikke bli
   dratt inn i spaltene under. */
#iv-innhold .aikort{max-width:70ch}

/* Prikkene mens Claude tenker. Sammen med den pulserende gnisten er dette
   den eneste indikasjonen kreatøren har på at noe skjer — og uten den
   trykket hun bare på knappen igjen. Og igjen. */
.aiprikker{display:inline-block;margin-left:1px}
.aiprikker i{
  display:inline-block;width:3px;height:3px;margin-left:3px;
  border-radius:50%;background:currentColor;vertical-align:middle;
  animation:aiprikk 1.4s ease-in-out infinite;
}
.aiprikker i:nth-child(2){animation-delay:.2s}
.aiprikker i:nth-child(3){animation-delay:.4s}
@keyframes aiprikk{
  0%,60%,100%{opacity:.25;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-2px)}
}
.aitenker em{font-style:normal;font-size:.86rem;opacity:.8}
@media(prefers-reduced-motion:reduce){
  .aiprikker i{animation:none;opacity:.6}
}


/* ==========================================================================
   ARKET TIL KJØKKENET

   «Last ned som PDF» bruker nettleserens egen utskrift. Ingen bibliotek:
   et PDF-bibliotek er rundt tre hundre kilobyte, og det er mye å laste ned
   på mobil for å løse noe nettleseren allerede kan. «Lagre som PDF» ligger
   i utskriftsdialogen på alle plattformer.

   Arket bygges i #pdf-ark og er usynlig på skjerm. Ved utskrift skjuler vi
   alt annet med visibility i stedet for display: da beholder resten av
   siden layouten sin, og vi slipper å vite hvordan portalen er bygget opp.
   ========================================================================== */
#pdf-ark{display:none}

@media print{
  /* Skjul alt, og hent bare arket tilbake. */
  body{visibility:hidden;background:#fff}
  #pdf-ark, #pdf-ark *{visibility:visible}
  #pdf-ark{
    display:block;position:absolute;left:0;top:0;width:100%;
    padding:0;color:#111;font-size:11pt;line-height:1.5;
  }

  /* Modalen ligger fixed over alt og ville ellers fulgt med på papiret. */
  .visningsrute{display:none !important}

  .ark-topp{border-bottom:2px solid #111;padding-bottom:10px;margin-bottom:18px}
  .ark-merk{
    margin:0 0 4px;font-size:8pt;letter-spacing:.14em;text-transform:uppercase;
    color:#555;
  }
  #pdf-ark h1{font-size:17pt;margin:0 0 8px;line-height:1.25}
  .ark-kort{margin:0;font-size:12pt;font-weight:600;line-height:1.45}

  #pdf-ark h2{
    font-size:9pt;letter-spacing:.12em;text-transform:uppercase;color:#555;
    margin:20px 0 8px;
    /* En overskrift alene nederst på siden er stygg. */
    break-after:avoid;page-break-after:avoid;
  }
  .ark-hint{margin:0 0 8px;font-size:9.5pt;color:#555;font-style:italic}

  #pdf-ark ol, #pdf-ark ul{margin:0;padding-left:18px}
  #pdf-ark li{
    margin-bottom:7px;
    /* Et punkt skal ikke deles på tvers av to sider. */
    break-inside:avoid;page-break-inside:avoid;
  }
  .ark-punkter li b{display:block;margin-bottom:1px}
  .ark-punkter li span{color:#333}

  /* Replikkene er til å si høyt, så de skal se ut som replikker. */
  .ark-replikker{list-style:none;padding-left:0}
  .ark-replikker li{
    border-left:3px solid #111;padding:2px 0 2px 11px;
    font-size:11.5pt;font-style:italic;
  }

  /* Sjekklista hukes av med penn, så den trenger en rute å krysse i. */
  .ark-sjekk{list-style:none;padding-left:0}
  .ark-sjekk li{position:relative;padding-left:22px}
  .ark-sjekk li:before{
    content:"";position:absolute;left:0;top:2px;
    width:11px;height:11px;border:1.4px solid #111;border-radius:2px;
  }

  /* Metoden. Nummerert, fordi rekkefølgen er halve poenget. */
  .ark-steg{padding-left:20px}
  .ark-steg li{margin-bottom:9px;color:#333}

  .ark-bunn{
    margin-top:22px;padding-top:8px;border-top:1px solid #bbb;
    font-size:8.5pt;color:#555;
  }

  @page{margin:16mm}
}

/* Knappen som åpner utskriften. */
.aiark{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line-mork);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.aiark .hvorfor{margin:0;flex:1 1 200px}


/* ==========================================================================
   STEGENE MENS CLAUDE JOBBER

   Ti sekunder er den eneste tida kreatøren sitter stille og ser på
   skjermen. Spørsmålene som dukker opp er de samme systemprompten ber
   Claude gå gjennom — leser hun dem noen ganger, kan hun stille dem selv.
   ========================================================================== */
#iv-innhold .aitanke{padding:4px 0}
.aitenker-topp{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-size:.9rem;font-weight:600;color:var(--ink-soft);
}

/* Selve resonnementet. Dempet med vilje: det er ikke svaret, det er veien
   dit. Blir det for tydelig, konkurrerer det med nedbrytningen under.

   Fast høyde med rulling, slik at kortet ikke hopper i lengden hver gang
   en ny tanke kommer. */
.aitankebok{
  max-height:260px;overflow-y:auto;
  border-left:2px solid var(--line-mork);padding:2px 0 2px 16px;
  display:flex;flex-direction:column;gap:10px;
}
.aitanke-linje{
  margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-soft);
  opacity:0;transform:translateY(4px);
  transition:opacity .4s ease, transform .4s ease;
}
.aitanke-linje.inne{opacity:1;transform:none}
/* Den setningen som fortsatt skrives. Litt blassere, så det synes at den
   ikke er ferdig. */
.aitanke-linje.narsket{opacity:.65}
@media(prefers-reduced-motion:reduce){
  .aitanke-linje{transition:none}
}

/* ==========================================================================
   ANNONSEN I STØRRE FORMAT

   Metas ramme ligger på deres domene og er låst til 335 piksler. Vi kan
   ikke be den om å bli bredere, så vi skalerer den med transform — den
   forstørres som et bilde. Litt mykere kanter, men lesbart, og det er
   forskjellen på å myse og å se.

   Analysen vikes unna mens annonsen er stor. Begge deler samtidig får
   ikke plass, og da blir ingen av dem gode.
   ========================================================================== */
.storknapp{
  margin:12px auto 0;display:block;font-size:.85rem;padding:7px 16px;
}
.visningskropp.forstorret .visningsfakta{display:none}
.visningskropp.forstorret{justify-content:center}
.visningskropp.forstorret .visningsramme{
  flex:1 1 100%;display:flex;flex-direction:column;align-items:center;
}
/* Videoen alene. Ingen skalering av noe som helst — dette er den ekte
   fila, så den får bare mer plass.

   contain framfor cover: en annonse er komponert for sitt format, og en
   avkuttet kant kan være nettopp det kreatøren skulle lagt merke til.
   Kvadratisk, stående og bred håndteres av samme regel. */
.storvideo{
  display:block;width:100%;max-width:900px;
  max-height:74vh;height:auto;
  object-fit:contain;background:#000;
  border-radius:12px;margin:0 auto;
}
.visningskropp.forstorret .storknapp{margin-top:16px}

@media(max-width:700px){
  .storvideo{max-height:60vh}
}


/* ==========================================================================
   DE TO HALVDELENE

   Manuset og annonseteksten er ulike håndverk. Det ene skal kreatøren SI
   til kamera, det andre skriver vi i annonsen. Blandet sammen i ett sett
   punkter kan hun ikke se hva som er hva.

   Tidspunktene er grunnen til at «det hun sier» har fått egen form: at
   sammenligningen kom etter 22 sekunder og ikke etter 8 er usynlig når man
   ser videoen, men det er ofte forskjellen på om noen blir værende.
   ========================================================================== */
.aidel{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-mork)}
.aidel .merk{
  display:flex;align-items:center;gap:7px;
  margin:0 0 12px;font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);
}
.aidel .merk svg{width:15px;height:15px;flex:0 0 auto}

/* Tidspunktet står som en egen kolonne, ikke inne i setningen. Da kan hun
   lese loddrett nedover og se rytmen i annonsen. */
.aitid{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.aitid li{display:flex;gap:12px;align-items:baseline;font-size:.94rem}
.aitid b{
  flex:0 0 84px;font-variant-numeric:tabular-nums;
  font-size:.82rem;font-weight:700;color:var(--brand);
}
.aitid span{color:var(--ink-soft);line-height:1.55}

.aitekstliste{margin:0;padding-left:20px;display:grid;gap:7px}
.aitekstliste li{font-size:.94rem;color:var(--ink-soft);line-height:1.55}

@media print{
  .ark-tid{padding-left:18px}
  .ark-tid li{margin-bottom:7px}
  .ark-tid b{color:#000}
}

/* Stegene som faktisk utføres, over resonnementet. Dempet og små: de er
   kvittering på at noe skjer, ikke innhold hun skal lære av. */
.aisteg{
  list-style:none;margin:0 0 14px;padding:0;
  display:flex;flex-direction:column;gap:6px;
}
.aisteg li{
  opacity:0;transform:translateY(4px);
  transition:opacity .35s ease, transform .35s ease;
  font-size:.85rem;color:var(--ink-soft);
  padding-left:18px;position:relative;
}
.aisteg li.inne{opacity:.85;transform:none}
.aisteg li:before{
  content:"";position:absolute;left:2px;top:.5em;
  width:5px;height:5px;border-radius:50%;background:var(--green,#3aa76d);
}
@media(prefers-reduced-motion:reduce){.aisteg li{transition:none}}


/* ==========================================================================
   SAMTALEN MED OSS

   Bygget etter mønsteret kreatørene og vi allerede kjenner fra Fiverr:
   meldingene i en rullende tavle, skrivefeltet festet under, avsender og
   klokkeslett over hver melding.

   Egne meldinger til høyre, våre til venstre. Det er den eneste plasseringen
   folk ikke trenger å lære.
   ========================================================================== */
.prat{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-card);overflow:hidden;margin-bottom:var(--luft-3);
}
.prat-tavle{
  /* Fast høyde med rulling. Uten den hopper hele siden i lengden hver gang
     det kommer en melding. */
  height:min(52vh,460px);overflow-y:auto;
  padding:20px;display:flex;flex-direction:column;gap:16px;
  background:var(--paper);
}
.prat-laster{margin:auto;color:var(--ink-soft);font-size:.92rem}

.prat-melding{max-width:min(78%,560px);align-self:flex-start}
.prat-melding.min{align-self:flex-end}
.prat-topp{
  display:flex;align-items:baseline;gap:8px;margin:0 0 4px;
  font-size:.76rem;color:var(--ink-soft);
}
.prat-melding.min .prat-topp{justify-content:flex-end}
.prat-topp b{font-weight:700;color:var(--ink)}
.prat-melding p{
  margin:0;padding:11px 15px;border-radius:14px;
  background:var(--card);border:1px solid var(--line);
  font-size:.95rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;
}
.prat-melding.min p{background:var(--brand);border-color:var(--brand);color:#fff}
.prat-kvittering{
  display:block;text-align:right;margin-top:4px;
  font-size:.72rem;color:var(--ink-soft);
}

.prat-skriv{
  display:flex;align-items:flex-end;gap:10px;
  padding:12px;border-top:1px solid var(--line);background:var(--card);
}
.prat-skriv textarea{
  flex:1 1 auto;resize:none;font:inherit;font-size:.95rem;line-height:1.5;
  padding:10px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);color:var(--ink);max-height:160px;
}
.prat-skriv textarea:focus{outline:2px solid var(--brand);outline-offset:1px}
.prat-skriv .btn{flex:0 0 auto;margin:0}
.prat-feil{margin:10px 0 0;color:var(--red);font-size:.9rem}

/* Uleste. Samme prikk som resten av menyen bruker. */
#sidemeny .prikk[hidden]{display:none}


/* ==========================================================================
   BUNNEN

   Bygget etter footeren på nordiva.no, så portalen kjennes som samme hus:
   merket til venstre, kolonner med dempede overskrifter, og en tynn linje
   med det juridiske nederst.

   Innholdet er tilpasset: kreatøren skal ikke handle vakuumposer herfra,
   hun skal finne tilbake til briefen og til oss.
   ========================================================================== */
#portalbunn{
  background:var(--brand);color:#fff;
  /* Ligger utenfor rutenettet med sidemenyen, så den går kant til kant —
     som på nordiva.no. Lå den inne i hovedfeltet, stoppet den der
     innholdet stoppet, og det så ut som en boks som hadde falt ned. */
  margin-top:var(--luft-5,56px);
}
#portalbunn.skjul{display:none}

/* Rutenett, ikke flex med space-between.

   Med flex fløt kolonnene fra hverandre etter hvor brede de tilfeldigvis
   var, og logoen ble stående alene i et stort tomrom til venstre. Fire
   kolonner med fast forhold gir samme rytme uansett hvor lange navnene
   er — merket får sin spalte, de tre listene deler resten likt. */
.bunn-topp{
  max-width:1180px;margin:0 auto;
  padding:72px var(--luft-3,22px) 60px;
  display:grid;grid-template-columns:1.2fr 1fr 1fr 1.1fr;
  gap:40px;align-items:start;
}
.bunn-merke img{
  /* Stor nok til å bære sin egen spalte. Førti piksler forsvant ved siden
     av tre tekstkolonner og så ut som en glemt favicon. */
  width:56px;height:56px;display:block;
  /* Logofila er marineblå, og bunnen er marineblå. Uten dette ligger
     merket der som en usynlig flekk. Vi snur den til hvit i stedet for å
     lage og vedlikeholde en egen fil. */
  filter:brightness(0) invert(1);
}

.bunn-blokk{min-width:0}
/* Dempet og lett, som på nordiva.no. Overskriften skal ikke konkurrere
   med lenkene under den. */
.bunn-tittel{
  margin:0 0 22px;font-size:.82rem;font-weight:500;
  letter-spacing:.02em;color:#fff;opacity:.6;
}
.bunn-blokk ul{list-style:none;margin:0;padding:0}
.bunn-blokk li{margin-bottom:14px}
.bunn-blokk li:last-child{margin-bottom:0}
.bunn-blokk button,
.bunn-blokk a{
  font:inherit;font-size:.95rem;color:#fff;text-decoration:none;
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  opacity:.92;
}
.bunn-blokk button:hover,
.bunn-blokk a:hover{opacity:1;text-decoration:underline}
.bunn-blokk em{
  display:block;font-style:normal;font-size:.82rem;opacity:.6;margin-top:3px;
}
/* Telefonnummeret hører til navnet over, ikke som et eget punkt med samme
   avstand. Strammer det inn så paret leses som én person. */
.bunn-blokk li + li:not(:has(em)){margin-top:-6px}

.bunn-bunn{
  border-top:1px solid rgba(255,255,255,.14);
  max-width:1180px;margin:0 auto;
  padding:22px var(--luft-3,22px) 32px;
  display:flex;flex-wrap:wrap;gap:8px 24px;
  /* Alene på linja hører den til høyre, som på nordiva.no. */
  justify-content:flex-end;align-items:baseline;
  font-size:.82rem;
}
.bunn-bunn p{margin:0;opacity:.65}
.bunn-bunn .tilbake{
  font:inherit;color:#fff;opacity:1;background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;
}

@media(max-width:900px){
  .bunn-topp{grid-template-columns:1fr 1fr;gap:36px}
  .bunn-merke{grid-column:1 / -1}
}
@media(max-width:520px){
  .bunn-topp{grid-template-columns:1fr;gap:30px;padding:44px var(--luft-3,22px) 36px}
  .bunn-bunn{justify-content:flex-start}
}


/* ==========================================================================
   INNBOKSEN I PANELET

   Bygget etter Fiverr, fordi det er der Theodor og Joar allerede har
   muskelminnet: samtalene til venstre med avatar og forhåndsvisning, den
   valgte til høyre som en flat liste.

   Ingen snakkebobler. I en samtale mellom to parter sier avataren og
   navnet alt man trenger, og flate meldinger leses raskere når de er
   lange — som de blir når noen forklarer hvorfor en video må gjøres om.
   ========================================================================== */
.innboks{
  display:grid;grid-template-columns:312px minmax(0,1fr);
  border:1px solid var(--line);border-radius:var(--radius-card);
  overflow:hidden;background:var(--card);
  height:min(70vh,640px);
}
@media(max-width:820px){
  .innboks{grid-template-columns:1fr;height:auto}
  .innboks-liste{max-height:230px;border-right:0;border-bottom:1px solid var(--line)}
}

/* --- avatarene ---------------------------------------------------------
   Standardmerket er en grå sirkel med en hvit person. Ikke en initial:
   to kreatører med samme forbokstav ville fått samme flate, og en tom
   plass ser ut som noe som mangler. */
.pavatar{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pavatar-stor{width:46px;height:46px}
.pavatar-tom{background:var(--line-mork,#c9cede);color:#fff}
.pavatar-tom svg{width:66%;height:66%;display:block}

/* --- samtalelista ------------------------------------------------------- */
.innboks-liste{
  border-right:1px solid var(--line);background:var(--card);
  overflow-y:auto;min-height:0;
}
.innboks-tom{padding:24px;margin:0;color:var(--ink-soft);font-size:.9rem;line-height:1.55}

.innboks-rad{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;
  background:none;border:0;border-bottom:1px solid var(--line-soft,var(--line));
  padding:14px 16px;cursor:pointer;
}
.innboks-rad:hover{background:var(--paper)}
/* Valgt rad skal være tydelig valgt. Samme grå som hover ga ingen
   forskjell på «her er musa» og «dette leser du nå». */
.innboks-rad.valgt{
  background:var(--brand-myk,#eef1f9);
  box-shadow:inset 3px 0 0 var(--brand);
}
.innboks-rad.valgt .innboks-navn{color:var(--brand)}

.innboks-tekst{min-width:0;flex:1 1 auto}
.innboks-navn{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-weight:600;font-size:.93rem;margin-bottom:2px;
}
.innboks-rad.ulest .innboks-navn{font-weight:700}
.innboks-nar{flex:0 0 auto;font-size:.74rem;color:var(--ink-soft);font-weight:400}
.innboks-forhandsvis{
  display:block;font-size:.84rem;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.innboks-rad.ulest .innboks-forhandsvis{color:var(--ink)}
.innboks-teller{
  flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;background:var(--brand);color:#fff;
  font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;
}

/* --- samtalen ----------------------------------------------------------- */
.innboks-tavle{display:flex;flex-direction:column;min-width:0;min-height:0}
.innboks-topp{
  flex:0 0 auto;padding:14px 22px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
}
.innboks-topp[hidden]{display:none}
.innboks-hvem b{display:block;font-size:1rem;line-height:1.3}
.innboks-hvem span{font-size:.8rem;color:var(--ink-soft)}

.innboks-prat{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:22px;background:var(--card);
}
.innboks-hint{margin:auto;color:var(--ink-soft);font-size:.9rem;text-align:center;padding-top:12%}

.pmld{display:flex;gap:12px;margin-bottom:22px}
.pmld:last-child{margin-bottom:0}
.pmld-kropp{min-width:0;flex:1 1 auto}
.pmld-topp{
  display:flex;align-items:baseline;gap:9px;margin-bottom:3px;
  font-size:.78rem;color:var(--ink-soft);
}
.pmld-topp b{font-size:.9rem;color:var(--ink)}
.pmld-lest{margin-left:auto;font-size:.72rem;opacity:.8}
.pmld p{
  margin:0;font-size:.94rem;line-height:1.6;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
/* Systemmeldinger — innmeldte leveringer — skal leses som notater, ikke
   som noe en av oss har skrevet. */
.pmld-system .pmld-kropp p{color:var(--ink-soft);font-size:.9rem}
.pmld-system .pavatar-tom{background:var(--line);color:var(--ink-soft)}

/* --- svarfeltet ---------------------------------------------------------
   Avsenderen på egen linje over. Ved siden av tekstfeltet stjal den
   plassen, og med et åpent nedtrekk var det uklart hvor man skulle skrive. */
.innboks-skriv{
  flex:0 0 auto;padding:14px 22px 18px;
  border-top:1px solid var(--line);background:var(--card);
}
.innboks-skriv[hidden]{display:none}

.innboks-som{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:.8rem;color:var(--ink-soft);
}
.innboks-som select{
  font:inherit;font-size:.84rem;font-weight:600;color:var(--ink);
  padding:5px 8px;border:1px solid var(--line-mork,var(--line));border-radius:8px;
  background:var(--card);
}

.innboks-felt{display:flex;align-items:flex-end;gap:10px}
.innboks-felt textarea{
  flex:1 1 auto;resize:none;font:inherit;font-size:.95rem;line-height:1.5;
  padding:12px 15px;max-height:150px;
  /* Tydelig kant og hvit flate. Med samme farge som bakgrunnen så feltet
     ut som en tom flate man ikke kunne skrive i. */
  border:1px solid var(--line-mork,#c9cede);border-radius:12px;
  background:var(--card);color:var(--ink);
}
.innboks-felt textarea::placeholder{color:var(--ink-soft);opacity:.85}
.innboks-felt textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(14,27,77,.12);
}
.innboks-felt .btn{flex:0 0 auto;margin:0}


/* ==========================================================================
   OVERSIKTENS TOPPDEKK — skiva og veksten

   Første raden på skjermen svarer på to spørsmål før man har rukket å
   lese noe: tjener vi penger akkurat nå, og vokser vi? Skiva til
   venstre, tallene til høyre.
   ========================================================================== */



/* --- veksttallene ------------------------------------------------------ */
.vekstrad{
  display:grid;gap:14px;margin-top:6px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.vekstkort{
  border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;
  background:var(--paper);display:flex;flex-direction:column;gap:3px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vekstkort:hover{
  transform:translateY(-2px);border-color:var(--line-mork);
  box-shadow:var(--shadow-lav);
}
.vekstkort .merk{
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
}
.vekstkort b{
  font-size:2.1rem;line-height:1.1;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink);
}
.vekstkort .under{font-size:.8rem;color:var(--ink-soft)}
.vekstkort .delta{margin-top:7px;align-self:flex-start}

/* Respekter at noen har slått av bevegelse. Da står nåla og buen der de
   skal med én gang, i stedet for å bli borte. */
@media (prefers-reduced-motion: reduce){
  .vekstkort{transition:none}
  .vekstkort:hover{transform:none}
}

/* Bunnen skal ligge nederst også når innholdet er kort — ellers henger
   den midt på skjermen på en tom skjerm og ser ut som en feil. */
body.egen-fane{min-height:100vh;display:flex;flex-direction:column}
body.egen-fane .appramme{flex:1 0 auto}


/* ==========================================================================
   SØYLENE — seks måneder, én serie om gangen

   Fire serier deler samme diagram i stedet for å stå som fire diagrammer
   ved siden av hverandre. Da kan man sammenligne form: vokser vinnerne i
   takt med forbruket, eller bare forbruket?
   ========================================================================== */

.soylevalg{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 18px}
.soylevelg{
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font:inherit;font-size:.84rem;font-weight:600;
  color:var(--ink-soft);cursor:pointer;transition:all .16s ease;
}
.soylevelg:hover{border-color:var(--line-mork);color:var(--ink)}
.soylevelg.pa{background:var(--brand);border-color:var(--brand);color:#fff}

.soylesum{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 20px}
.soylesum b{
  font-size:2.4rem;line-height:1;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.soylesum > span{font-size:.88rem;color:var(--ink-soft)}

.soylefelt{
  display:flex;align-items:flex-end;gap:min(3%,26px);
  height:220px;padding:0 2px;
}
.soyle{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;height:100%;position:relative;
  cursor:default;outline:none;
}
.soylestolpe{
  width:100%;max-width:76px;height:var(--h);border-radius:10px 10px 4px 4px;
  /* Vokser opp fra grunnlinja, forskjøvet per søyle så raden bygger seg
     opp fra venstre i stedet for å sprette samlet. */
  transform-origin:bottom;transform:scaleY(0);
  animation:soylevekst .62s cubic-bezier(.22,.68,.32,1) forwards;
  animation-delay:calc(var(--nr) * 70ms);
  transition:filter .16s ease;
}
@keyframes soylevekst{ to{ transform:scaleY(1) } }
.soyle:hover .soylestolpe,
.soyle:focus-visible .soylestolpe{filter:brightness(1.14) saturate(1.1)}
.soyle:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:8px}

.soylenavn{
  margin-top:10px;font-size:.76rem;color:var(--ink-soft);white-space:nowrap;
}

/* Bobla. Ligger over søyla, kommer først på hover — tallene skal være
   der når man spør, ikke stå og rope hele tiden. */
.soylebob{
  position:absolute;bottom:calc(var(--h) + 34px);left:50%;transform:translate(-50%,6px);
  background:var(--brand);color:#fff;border-radius:12px;padding:10px 13px;
  font-size:.78rem;line-height:1.45;white-space:nowrap;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .16s ease, transform .16s ease;
  box-shadow:var(--shadow);z-index:3;
}
.soylebob b{display:block;font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums}
.soylebob i{display:block;font-style:normal;opacity:.7;font-size:.72rem;margin-bottom:5px}
.soylebob u{
  display:block;text-decoration:none;opacity:.72;font-size:.71rem;
  border-top:1px solid rgba(255,255,255,.2);margin-top:7px;padding-top:6px;
}
.soyle:hover .soylebob,
.soyle:focus-visible .soylebob{opacity:1;transform:translate(-50%,0)}

.soylenote{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}

@media(max-width:700px){
  .soylefelt{height:170px}
  .soylenavn{font-size:.68rem}
}
@media (prefers-reduced-motion: reduce){
  .soylestolpe{animation:none;transform:scaleY(1)}
  .soylebob{transition:none}
}

/* Kildebryteren står litt fra seriene — den svarer på et annet spørsmål:
   ikke HVA som telles, men HVEM som telles med. */
.soylevelg.kilde{margin-left:auto}
.soylevelg.kilde.pa{background:var(--green);border-color:var(--green)}
@media(max-width:700px){ .soylevelg.kilde{margin-left:0} }