/* InstaSurvey — felles stil for instasurvey.html, instasurvey-ny.html og
   instasurvey-svar.html.

   Lastes ETTER ib-stil.css, som eier alle fargene. Her er det ingen nye
   :root-tokens og ingen hardkodede farger utenom de som ikke finnes der
   (rene gråtoner for skjemakant og hvit flate) — se CLAUDE.md, «Brand &
   Styling»: tokenene har drevet fra hverandre én gang før, og det er den
   eneste grunnen til at den fila finnes.

   Tre sider i ett stilark og ikke tre <style>-blokker: de deler nesten alt,
   og verktøyene i dette repoet som har hver sin kopi er nettopp de som ser
   litt forskjellige ut fra hverandre.

   14px basis som register/prosjekter/beslutningsloggen — dette er verktøy man
   jobber i, ikke dokumenter man leser. */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* hidden-attributtet må vinne over våre egne display-regler. Nettleserens egen
   regel er bare [hidden]{display:none}, og en hvilken som helst forfatterregel
   med display slår den — .is-knapp{display:inline-flex} gjorde at knapper vi
   satte .hidden = true på ble stående synlige. Det er lett å overse, fordi
   elementet oppfører seg riktig i alt annet enn å forsvinne. */
[hidden] { display: none !important; }

body {
  font-family: var(--sans);
  font-size: 14px;
  background: var(--ib-light);
  color: var(--ib-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -0.015em; line-height: 1.3; }
a { color: var(--ib-green-dark); }

/* ── Innloggingsport ──────────────────────────────────────────────────────
   Samme grep som de andre sidene: alt utenom overlegget skjules til
   instasurvey-auth.js setter .is-authed på <html>. Merk at dette skjuler
   markupen, det stopper den ikke fra å bli levert — den ekte sperren er
   tokensjekken i API-et. */
html:not(.is-authed), html:not(.is-authed) body { overflow: hidden; height: 100%; }
html:not(.is-authed) body > *:not(#is-auth-overlay) { visibility: hidden; }
html.is-authed #is-auth-overlay { display: none; }

#is-auth-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: var(--ib-dark-bg); color: #fff;
}
.is-auth-box { text-align: center; max-width: 340px; padding: 0 1.5rem; }
.is-auth-box p { color: rgba(255,255,255,0.7); font-size: 0.9rem; margin-top: 1rem; }
.is-auth-spinner {
  width: 34px; height: 34px; margin: 0 auto;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--ib-green-logo);
  border-radius: 50%; animation: is-spin 0.8s linear infinite;
}
@keyframes is-spin { to { transform: rotate(360deg); } }

/* ── Navigasjon ───────────────────────────────────────────────────────────
   header.is-nav fylles av instasurvey-nav.js. .ib-topnav i ib-stil.css eier
   utseendet; her settes bare de to tingene den delte regelen ikke kan vite. */
header.is-nav { position: sticky; top: 0; z-index: 50; }
/* Størrelsen på ikonet ligger i ib-stil.css (.nav-ikon), delt med de andre sidene. */

/* ── Sidelayout ───────────────────────────────────────────────────────────*/
.is-side { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 5rem; }
.is-side.smal { max-width: 760px; }

.is-tittelrad {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.is-tittelrad h1 { font-size: 1.5rem; }
.is-tittelrad p { color: var(--ib-gray); font-size: 0.86rem; margin-top: 0.2rem; }

/* ── Kort ─────────────────────────────────────────────────────────────────*/
.is-kort {
  background: #fff;
  border: 1px solid var(--ib-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1rem;
}
.is-kort > h2 {
  font-size: 0.95rem; margin-bottom: 0.2rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.is-kort > h2 + .is-under { margin-bottom: 1rem; }
.is-under { color: var(--ib-gray); font-size: 0.82rem; }

/* ── Skjema ───────────────────────────────────────────────────────────────*/
.is-felt { margin-bottom: 1rem; }
.is-felt > label, .is-etikett {
  display: block; font-weight: 600; font-size: 0.82rem; margin-bottom: 0.3rem;
}
.is-hjelp { color: var(--ib-gray); font-size: 0.78rem; margin-bottom: 0.4rem; }
.is-pakrevd { color: var(--ib-red); font-weight: 700; }

input[type="text"], input[type="email"], input[type="date"], input[type="time"],
input[type="number"], textarea, select {
  width: 100%;
  font-family: inherit; font-size: 0.88rem; color: var(--ib-dark);
  background: #fff;
  padding: 7px 10px;
  border: 1px solid var(--ib-border);
  border-radius: var(--radius);
}
textarea { resize: vertical; min-height: 78px; line-height: 1.55; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ib-green-dark);
  box-shadow: 0 0 0 3px var(--ib-green-bg);
}
input:disabled, textarea:disabled, select:disabled {
  background: var(--ib-light); color: var(--ib-gray); cursor: not-allowed;
}
.is-rad { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.is-rad > * { flex: 1 1 180px; min-width: 0; }

/* ── Knapper ──────────────────────────────────────────────────────────────*/
.is-knapp {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: inherit; font-size: 0.83rem; font-weight: 600;
  padding: 7px 14px;
  border: 1px solid var(--ib-border);
  border-radius: var(--radius);
  background: #fff; color: var(--ib-dark);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.is-knapp:hover:not(:disabled) { border-color: var(--ib-gray); }
.is-knapp:disabled { opacity: 0.5; cursor: not-allowed; }
.is-knapp.primar {
  background: var(--ib-green-dark); border-color: var(--ib-green-dark); color: #fff;
}
.is-knapp.primar:hover:not(:disabled) {
  background: var(--ib-green); border-color: var(--ib-green);
}
.is-knapp.fare { color: var(--ib-red); border-color: #e8c9c9; }
.is-knapp.fare:hover:not(:disabled) { background: var(--ib-red-bg); border-color: var(--ib-red); }
.is-knapp.liten { font-size: 0.76rem; padding: 4px 9px; }
.is-knapperad {
  display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center;
  margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--ib-border);
}
.is-knapperad .is-skyv { margin-left: auto; }

/* ── Merkelapper ──────────────────────────────────────────────────────────*/
.is-merke {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--ib-light); color: var(--ib-gray); border: 1px solid var(--ib-border);
}
.is-merke.aktiv   { background: var(--ib-green-bg); color: var(--ib-green-dark); border-color: var(--ib-green-light); }
.is-merke.utkast  { background: var(--ib-light); color: var(--ib-gray); }
.is-merke.avsluttet { background: #eceff1; color: var(--ib-dark); }
.is-merke.frist   { background: var(--ib-amber-bg); color: var(--ib-amber); border-color: #f2ddb0; }
.is-merke.anonym  { background: #eef2f7; color: #3f5878; border-color: #d9e2ee; }

/* ── Tabell ───────────────────────────────────────────────────────────────
   10px versaler i hodet, 12.5px i cellene — samme som de andre verktøyene. */
.is-tabell { width: 100%; border-collapse: collapse; }
.is-tabell th {
  text-align: left; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); font-weight: 600;
  padding: 0 10px 7px; border-bottom: 1px solid var(--ib-border);
}
.is-tabell td {
  font-size: 12.5px; padding: 9px 10px;
  border-bottom: 1px solid var(--ruleSoft); vertical-align: top;
}
.is-tabell tbody tr:hover { background: #fafbfb; }
.is-tabell .hoyre { text-align: right; }
.is-tabell a.tittel { font-weight: 600; text-decoration: none; }
.is-tabell a.tittel:hover { text-decoration: underline; }

/* ── Spørsmålsbygger ──────────────────────────────────────────────────────*/
.is-sporsmal {
  border: 1px solid var(--ib-border); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 0.85rem; background: #fff;
}
.is-sporsmal.dratt { opacity: 0.4; }
.is-sporsmal-hode {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem;
}
.is-sporsmal-nr {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--faint);
  text-transform: uppercase; white-space: nowrap;
}
.is-sporsmal-hode .is-skyv { margin-left: auto; display: flex; gap: 0.3rem; }
.is-valg { display: flex; gap: 0.45rem; align-items: center; margin-bottom: 0.4rem; }
.is-valg input { flex: 1; }
.is-valg .is-knapp { flex-shrink: 0; }

/* ── Svarskjema ───────────────────────────────────────────────────────────*/
.is-svarsporsmal { padding: 1.15rem 0; border-bottom: 1px solid var(--ruleSoft); }
.is-svarsporsmal:last-child { border-bottom: 0; }
.is-svarsporsmal > .sporsmalstekst {
  font-weight: 600; font-size: 0.92rem; margin-bottom: 0.15rem;
}
.is-svarsporsmal.mangler { background: #fffaf7; margin: 0 -0.7rem; padding: 1.15rem 0.7rem; border-radius: var(--radius); }

/* Radio og avkryssing. <label> som flate, slik at hele raden er klikkbar —
   avkryssingsboksen alene er et lite mål, særlig på telefon. */
.is-alternativ {
  display: flex; align-items: flex-start; gap: 0.55rem;
  padding: 7px 10px; margin-bottom: 4px;
  border: 1px solid var(--ib-border); border-radius: var(--radius);
  cursor: pointer; font-size: 0.88rem;
}
.is-alternativ:hover { border-color: var(--ib-gray); }
.is-alternativ input { width: auto; margin-top: 3px; flex-shrink: 0; accent-color: var(--ib-green-dark); }
.is-alternativ.valgt { border-color: var(--ib-green-dark); background: var(--ib-green-bg); }

.is-skala { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.is-skala label {
  flex: 1 1 42px; text-align: center; cursor: pointer;
  border: 1px solid var(--ib-border); border-radius: var(--radius);
  padding: 9px 4px; font-size: 0.9rem; font-weight: 600;
}
.is-skala label:hover { border-color: var(--ib-gray); }
.is-skala label.valgt { border-color: var(--ib-green-dark); background: var(--ib-green-bg); color: var(--ib-green-dark); }
.is-skala input { position: absolute; opacity: 0; pointer-events: none; }
.is-skala-endepunkter {
  display: flex; justify-content: space-between;
  font-size: 0.76rem; color: var(--ib-gray); margin-top: 0.3rem;
}

/* ── Resultater ───────────────────────────────────────────────────────────*/
.is-resultatsporsmal { padding: 1.1rem 0; border-bottom: 1px solid var(--ruleSoft); }
.is-resultatsporsmal:last-child { border-bottom: 0; }
.is-stolpe { margin-bottom: 0.55rem; }
.is-stolpe-tekst {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.83rem; margin-bottom: 3px;
}
.is-stolpe-tekst .tall { color: var(--ib-gray); white-space: nowrap; font-variant-numeric: tabular-nums; }
.is-stolpe-spor { height: 8px; background: var(--ib-light); border-radius: 999px; overflow: hidden; }
.is-stolpe-fyll { height: 100%; background: var(--ib-green-dark); border-radius: 999px; }

.is-fritekstsvar {
  border-left: 2px solid var(--ib-green-light);
  padding: 0.35rem 0 0.35rem 0.8rem; margin-bottom: 0.6rem;
  font-size: 0.87rem; white-space: pre-wrap;
}
.is-fritekstsvar .hvem { display: block; font-size: 0.76rem; color: var(--ib-gray); margin-top: 0.15rem; }

.is-noekkeltall { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.is-noekkeltall > div {
  flex: 1 1 130px; background: #fff;
  border: 1px solid var(--ib-border); border-radius: var(--radius); padding: 0.8rem 0.9rem;
}
.is-noekkeltall .tall { font-size: 1.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.is-noekkeltall .merkelapp {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; margin-top: 0.2rem;
}

/* ── Meldinger ────────────────────────────────────────────────────────────*/
.is-melding {
  border: 1px solid var(--ib-border); border-left-width: 3px;
  border-radius: var(--radius); padding: 0.7rem 0.9rem;
  font-size: 0.84rem; margin-bottom: 1rem;
}
.is-melding.info   { background: #f3f7fa; border-left-color: #5b7fa6; }
.is-melding.ok     { background: var(--ib-green-bg); border-left-color: var(--ib-green-dark); }
.is-melding.advar  { background: var(--ib-amber-bg); border-left-color: var(--ib-amber); }
.is-melding.feil   { background: var(--ib-red-bg); border-left-color: var(--ib-red); }
.is-melding strong { display: block; margin-bottom: 0.15rem; }

.is-tom { text-align: center; padding: 3rem 1rem; color: var(--ib-gray); }
.is-tom .ik { font-size: 2rem; opacity: 0.35; display: block; margin: 0 auto 0.6rem; }

/* ── Modal ────────────────────────────────────────────────────────────────*/
.is-modal {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(30,37,48,0.45);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.is-modal-boks {
  background: #fff; border-radius: var(--radius);
  max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto;
  padding: 1.4rem 1.5rem;
}
.is-modal-boks h2 { font-size: 1.05rem; margin-bottom: 0.4rem; }

/* Fremdrift under utsending. Én linje per mottaker er med vilje: en samlet
   «sendt til 23» skjuler nøyaktig det man trenger å vite når 2 av dem feilet. */
.is-fremdrift { max-height: 220px; overflow-y: auto; margin: 0.8rem 0; font-size: 0.82rem; }
.is-fremdrift div { display: flex; gap: 0.5rem; padding: 3px 0; }
.is-fremdrift .status { width: 1.1rem; flex-shrink: 0; text-align: center; font-weight: 700; }
.is-fremdrift .ja { color: var(--ib-green-dark); }
.is-fremdrift .nei { color: var(--ib-red); }
.is-fremdrift .epost { color: var(--ib-gray); }

@media (max-width: 720px) {
  .is-side { padding: 1.25rem 1rem 4rem; }
  .is-rad { flex-direction: column; gap: 0.5rem; }
  /* flex-basis gjelder hovedaksen, og den er høyden når retningen er column —
     de 180px-ene som gir feltene bredde side om side ble til 180px HØYDE her,
     med et stort tomrom under hvert felt. Må nullstilles sammen med retningen. */
  .is-rad > * { flex: 0 0 auto; }
  .is-tabell thead { display: none; }
  .is-tabell tbody tr {
    display: block; border: 1px solid var(--ib-border);
    border-radius: var(--radius); margin-bottom: 0.6rem; background: #fff; padding: 0.4rem 0;
  }
  .is-tabell td { display: block; border: 0; padding: 4px 12px; }
  .is-tabell td::before {
    content: attr(data-kol); display: block;
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--faint); font-weight: 600;
  }
  .is-tabell td.hoyre { text-align: left; }
}
