/* Sikkerhetssjekken på /sikkerhetssjekk. Lastes bare på den siden.
   Bruker variablene fra style.css, så lys og mørk modus virker av seg selv. */

.sjekk-seksjon { padding-top: clamp(36px, 5vw, 56px); padding-bottom: clamp(44px, 6vw, 72px); }
.sjekk-skjema { max-width: 720px; margin: 0 auto; }
.sjekk-rad { display: flex; gap: 10px; }
.sjekk-rad input[type="text"] { flex: 1; min-width: 0; font-size: 16px; }
.sjekk-rad .knapp { white-space: nowrap; padding: 12px 22px; }
.sjekk-skjema .skjema-status { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--farge-dempet); }
.sjekk-skjema .skjema-status.er-feil { color: var(--farge-feil-tekst); background: var(--farge-feil-bg); border: 1px solid var(--farge-feil-linje); border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: 14.5px; }

.sjekk-laster { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid var(--farge-linje); border-top-color: var(--farge-aksent); border-radius: 50%; animation: sjekk-snurr .8s linear infinite; }
@keyframes sjekk-snurr { to { transform: rotate(360deg); } }

/* ---------- Resultat ---------- */
.sjekk-resultat { max-width: 960px; margin: 22px auto 0; display: grid; gap: 14px; scroll-margin-top: 90px; }

.sjekk-score { display: flex; gap: 26px; align-items: center; background: var(--farge-flate); border: 1px solid var(--farge-linje-kort); border-radius: 16px; padding: clamp(20px, 3vw, 28px); box-shadow: 0 26px 50px -38px var(--skygge); }
.sjekk-maaler { position: relative; width: 132px; height: 132px; flex: none; }
.sjekk-maaler svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sjekk-maaler circle { fill: none; stroke-width: 10; }
.sjekk-maaler .spor { stroke: var(--farge-bakgrunn-dempet); }
.sjekk-maaler .verdi { stroke-linecap: round; transition: stroke-dashoffset .9s ease; }
.sjekk-maaler-tekst { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sjekk-maaler-tekst strong { font-size: 40px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.sjekk-maaler-tekst span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--farge-dempet-3); margin-top: 5px; }

.sjekk-hode { display: flex; gap: 12px; align-items: center; }
.sjekk-karakter { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 11px; font-size: 21px; font-weight: 600; color: #fff; flex: none; }
.sjekk-hode h2 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.5rem); letter-spacing: -.025em; word-break: break-all; }
.sjekk-vurdering { margin: 12px 0 0; color: var(--farge-tekst-2); font-size: 1.02rem; line-height: 1.55; }
.sjekk-merknad { margin: 8px 0 0; font-size: 13.5px; color: var(--farge-dempet-3); }

.sjekk-bokser { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.sjekk-boks { display: flex; flex-direction: column; gap: 6px; background: var(--farge-flate); border: 1px solid var(--farge-linje-kort); border-radius: 12px; padding: 14px 15px; }
.sjekk-boks-tittel { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--farge-dempet-3); line-height: 1.35; min-height: 2.7em; }
.sjekk-boks-poeng { color: var(--farge-dempet); font-size: 14px; }
.sjekk-boks-poeng strong { font-size: 25px; font-weight: 600; letter-spacing: -.03em; color: var(--farge-tekst); }
.sjekk-strek { display: block; height: 5px; background: var(--farge-bakgrunn-dempet); border-radius: 99px; overflow: hidden; }
.sjekk-strek span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .8s ease; }
.sjekk-boks-status { font-size: 13px; }

.sjekk-cta { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--farge-mork); color: var(--farge-mork-dempet); border-radius: 16px; padding: clamp(22px, 3vw, 30px); }
.sjekk-cta h3 { margin: 0 0 6px; color: var(--farge-mork-tekst); font-size: 1.25rem; letter-spacing: -.02em; }
.sjekk-cta p { margin: 0; max-width: 36em; line-height: 1.6; }

/* ---------- Rapport på e-post (i den mørke boksen) ---------- */
.sjekk-rapport { align-items: flex-start; }
.sjekk-rapport .min0 { flex: 1 1 300px; }
.sjekk-epost { flex: 1 1 340px; display: grid; gap: 10px; position: relative; }
.sjekk-epost-rad { display: flex; gap: 10px; }
.sjekk-epost-rad input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 12px 13px; border-radius: 8px; border: 1px solid var(--farge-mork-linje); background: rgba(255, 255, 255, .06); color: var(--farge-mork-tekst); }
.sjekk-epost-rad input::placeholder { color: var(--farge-mork-dempet-2, #8fa79a); }
.sjekk-epost-rad input:focus-visible { outline: 2px solid var(--farge-mork-aksent, #7fb79e); outline-offset: 1px; }
.sjekk-epost-rad .knapp { background: var(--farge-mork-knapp, #4fae86); color: var(--farge-mork-knapp-tekst, #08130f); white-space: nowrap; padding: 12px 18px; font-weight: 600; }
.sjekk-epost-rad .knapp:hover { background: var(--farge-mork-knapp-hover, #63c39a); }
.sjekk-epost-robot:empty { display: none; }
.sjekk-epost-status { margin: 0; font-size: 14px; color: var(--farge-mork-tekst); }
.sjekk-epost-status:empty { display: none; }
.sjekk-epost-merknad { margin: 0; font-size: 12px; line-height: 1.55; color: var(--farge-mork-dempet); }
.sjekk-epost-merknad a, .sjekk-epost-ferdig a { color: var(--farge-mork-aksent, #7fb79e); }
.sjekk-epost-ferdig { flex: 1 1 340px; margin: 0; padding: 14px 16px; border-radius: 10px; background: rgba(127, 183, 158, .12); color: var(--farge-mork-tekst); line-height: 1.55; }

@media (max-width: 560px) {
  .sjekk-rad { flex-direction: column; }
  .sjekk-score { flex-direction: column; align-items: flex-start; }
  .sjekk-epost-rad { flex-direction: column; }
}