/* ==========================================================================
   Sikkerhetsradaren (/sikkerhetsradar). Bruker variablene i style.css, så
   lyst og mørkt tema følger med. Kortene og punktene lages i server/api.js.
   ========================================================================== */

.radar-side {
  --radar-kritisk: var(--farge-feil);
  --radar-hoy: color-mix(in srgb, var(--farge-feil) 55%, var(--farge-advarsel-tekst));
  --radar-middels: var(--farge-stripe-delvis);
  --radar-lav: var(--farge-dempet-4);
}

/* ------------------------------------------------------------ radarfiguren i hero */

.radarpanel { max-width: 460px; width: 100%; justify-self: end; margin: 0; }
.radar { display: block; width: 100%; height: auto; padding: 6px 10px 2px; }
.radar-ring { fill: none; stroke: var(--farge-linje-kort); stroke-width: 1; }
.radar-ring--ytterst { stroke: var(--farge-linje-knapp); fill: color-mix(in srgb, var(--farge-ok) 4%, transparent); }
.radar-eike { stroke: var(--farge-linje-indre); stroke-width: 1; }
.radar-sektor { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; fill: var(--farge-dempet-2); }
.radar-avstand { font-family: var(--font-mono); font-size: 9.5px; fill: var(--farge-dempet-3); }
.radar-midt { fill: var(--farge-ok); }

/* Sveipet: en kile som går rundt, som på en ekte radar. */
.radar-sveip { transform-origin: 200px 200px; animation: radar-sveip 9s linear infinite; }
.radar-sveip path { fill: url(#radar-sveipfarge); }
.radar-sveip line { stroke: var(--farge-ok); stroke-width: 1.2; opacity: .55; }
.radar-sveip-start { stop-color: var(--farge-ok); stop-opacity: 0; }
.radar-sveip-slutt { stop-color: var(--farge-ok); stop-opacity: .2; }
@keyframes radar-sveip { to { transform: rotate(360deg); } }

/* Punktene: ett per varsel. Fargen er alvorlighetsgraden, ringen betyr at feilen utnyttes i angrep. */
.radar-punkt { cursor: pointer; }
/* Kjernen er halvt gjennomsiktig med en tynn kant i samme farge, så punktene virker mykere og tette klynger
   fortsatt kan leses. */
.radar-punkt { --punkt: var(--radar-middels); }
.radar-punkt--kritisk { --punkt: var(--radar-kritisk); }
.radar-punkt--hoy { --punkt: var(--radar-hoy); }
.radar-punkt--lav { --punkt: var(--radar-lav); }
.radar-punkt circle { transition: transform .15s ease, fill-opacity .15s ease; transform-box: fill-box; transform-origin: center; }
.radar-punkt-kjerne { fill: var(--punkt); fill-opacity: .42; stroke: var(--punkt); stroke-opacity: .85; stroke-width: 1.1; }
.radar-punkt .radar-punkt-ring { fill: none; stroke: var(--punkt); stroke-width: 1.2; opacity: .5; animation: radar-ring 2.6s ease-out infinite; }
.radar-punkt:hover .radar-punkt-kjerne, .radar-punkt.er-valgt .radar-punkt-kjerne { transform: scale(1.4); fill-opacity: .9; }
.radar-punkt.er-dempet { opacity: .18; }
@keyframes radar-ring { 0% { transform: scale(.75); opacity: .55; } 80%, 100% { transform: scale(1.35); opacity: 0; } }

.radar-forklaring { flex-wrap: wrap; gap: 6px 16px; justify-content: flex-start; }
.radar-forklaring span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.radar-nokkel { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.radar-nokkel--kritisk { background: color-mix(in srgb, var(--radar-kritisk) 42%, transparent); border: 1.1px solid var(--radar-kritisk); }
.radar-nokkel--hoy { background: color-mix(in srgb, var(--radar-hoy) 42%, transparent); border: 1.1px solid var(--radar-hoy); }
.radar-nokkel--ring { background: none; border: 1.5px solid var(--radar-kritisk); box-shadow: inset 0 0 0 2px var(--farge-flate-3), inset 0 0 0 6px var(--radar-kritisk); }

@media (prefers-reduced-motion: reduce) {
  .radar-sveip, .radar-punkt .radar-punkt-ring { animation: none; }
  .radar-sveip { display: none; }
}
@media (max-width: 760px) { .radarpanel { justify-self: stretch; max-width: none; } }

/* ------------------------------------------------------------ listen */

.radar-oppsett { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 48px); align-items: start; }
.radar-hode { display: flex; gap: 12px 16px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.radarliste { display: grid; gap: 14px; }
.radar-venter, .radar-tom { padding: 22px 24px; border: 1px dashed var(--farge-linje-knapp); border-radius: var(--radius); font-family: var(--font-mono); font-size: 13px; color: var(--farge-dempet-2); }
.radar-tom[hidden] { display: none; }

.radarkort {
  --radar-farge: var(--radar-middels);
  position: relative; padding: 22px 24px 20px 26px;
  background: var(--farge-flate); border: 1px solid var(--farge-linje-kort); border-radius: var(--radius);
  scroll-margin-top: 96px; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease;
}
/* Fargestripen til venstre viser alvorlighetsgraden. */
.radarkort::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--radar-farge); }
.radarkort--kritisk { --radar-farge: var(--radar-kritisk); }
.radarkort--hoy { --radar-farge: var(--radar-hoy); }
.radarkort--lav { --radar-farge: var(--radar-lav); }
.radarkort[hidden] { display: none; }
.radarkort:target, .radarkort.er-valgt { border-color: var(--farge-aksent); box-shadow: 0 14px 26px -22px var(--skygge); }

.radarkort-topp { display: flex; gap: 8px 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.radarkort-merker { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.radarkort-dato { font-family: var(--font-mono); font-size: 12px; color: var(--farge-dempet-3); white-space: nowrap; }
.radar-grad {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px; border: 1px solid var(--farge-linje-knapp); color: var(--farge-tekst-2);
}
.radar-grad::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--radar-farge, var(--radar-middels)); }
.radar-grad--kritisk { --radar-farge: var(--radar-kritisk); }
.radar-grad--hoy { --radar-farge: var(--radar-hoy); }
.radar-grad--lav { --radar-farge: var(--radar-lav); }
.radar-grad b { font-weight: 600; color: var(--farge-tekst); }

.radarkort-tittel { font-size: 1.22rem; line-height: 1.25; letter-spacing: -.02em; margin-bottom: 6px; text-wrap: balance; }
.radarkort-hva { font-size: 14px; line-height: 1.5; color: var(--farge-dempet-3); margin-bottom: 10px; }
.radarkort-tekst { font-size: 16px; line-height: 1.62; color: var(--farge-tekst-2); max-width: 46em; }
.radarkort-tiltak {
  margin-top: 14px; padding: 12px 16px; max-width: 46em;
  font-size: 15.5px; line-height: 1.58; color: var(--farge-tekst-2);
  background: var(--farge-flate-3); border: 1px solid var(--farge-linje-indre); border-radius: 10px;
}
.radarkort-etikett { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--farge-etikett); }
.radarkort-merknad {
  margin-top: 10px; padding: 12px 16px; max-width: 46em; font-size: 15.5px; line-height: 1.58; color: var(--farge-tekst-2);
  background: var(--farge-merke-bg); border: 1px solid var(--farge-merke-linje); border-left: 4px solid var(--farge-ok); border-radius: 10px;
}
.radarkort-merknad strong { color: var(--farge-ok); }
.radarkort-fakta, .radarkort-lenker { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--farge-dempet-3); }
.radarkort-fakta { margin-top: 16px; }
.radarkort-lenker { margin-top: 4px; }
.radarkort-lenker a { color: var(--farge-lenke); white-space: nowrap; }

/* ------------------------------------------------------------ forklaringen ved siden av */

.radar-side-boks { position: sticky; top: 92px; display: grid; gap: 14px; }
.radar-forklar { padding: 22px; }
.radar-forklar h2 { font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: 14px; }
.radar-forklar dl { display: grid; gap: 14px; margin: 0; }
.radar-forklar dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--farge-etikett); margin-bottom: 4px; }
.radar-forklar dd { margin: 0; font-size: 14.5px; line-height: 1.58; color: var(--farge-dempet); }
.radar-sjekk { padding: 22px; }
.radar-sjekk p { font-size: 14.5px; line-height: 1.58; color: var(--farge-dempet); margin-bottom: 14px; }
.radar-sjekk h2 { font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: 8px; }

.radar-kilder { display: grid; gap: 1px; }
.radar-kilder a { font-weight: 500; }
.radar-kreditering { margin-top: 18px; max-width: 60em; }

@media (max-width: 980px) {
  .radar-oppsett { grid-template-columns: minmax(0, 1fr); }
  .radar-side-boks { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
}
@media (max-width: 560px) {
  .radarkort { padding: 18px 18px 16px 20px; }
  .radarkort-tittel { font-size: 1.12rem; }
}
.temafilter .radar-teller { margin-left: 5px; opacity: .65; font-weight: 400; }
/* Fire tall i hero: alltid 2 × 2, så det ikke blir 3 + 1 med et tomt felt. */
.fakta.radar-tall { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }

/* ------------------------------------------------------------ kortene: lenke til egen side, NSM og «gjelder dette meg?» */

.radarkort-tittel a { color: inherit; text-decoration: none; }
.radarkort-tittel a:hover { color: var(--farge-lenke); text-decoration: underline; text-underline-offset: 3px; }
.radarkort-nsm {
  margin-top: 10px; padding: 12px 16px; max-width: 46em; font-size: 15.5px; line-height: 1.58; color: var(--farge-tekst-2);
  background: var(--farge-feil-bg); border: 1px solid var(--farge-feil-linje); border-left: 4px solid var(--farge-feil); border-radius: 10px;
}
.radarkort-nsm strong { color: var(--farge-feil-tekst); }
.radarkort-sjekk { margin-top: 12px; }
.radar-hode-lenker { display: flex; gap: 6px 18px; align-items: baseline; flex-wrap: wrap; }

/* ------------------------------------------------------------ egen side per varsel, og arkivet */

.radar-varsel-hva { margin: 14px 0 0; }
.radar-arkivert { margin-top: 14px; }
.radar-varselside .h2 { margin-top: 34px; }
.radar-varselside .h2:first-child { margin-top: 0; }
.radar-varselside .radarkort-tiltak { margin-top: 0; font-size: 16.5px; }
.radar-sjekkboks { display: flex; gap: 16px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 22px; padding: 20px 22px; }
.radar-sjekkboks h2 { font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: 6px; }
.radar-sjekkboks p { font-size: 15px; line-height: 1.55; color: var(--farge-dempet); max-width: 34em; }
.radar-cveliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--farge-linje-indre); border: 1px solid var(--farge-linje); border-radius: 12px; overflow: hidden; }
.radar-cveliste li { display: flex; gap: 8px 14px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; padding: 12px 16px; background: var(--farge-flate); font-family: var(--font-mono); font-size: 13px; }
.radar-videre { margin-top: 30px; }
.radar-maneder { margin-bottom: 18px; }
.radar-maneder a.er-valgt { color: var(--farge-flate); background: var(--farge-ok); border-color: var(--farge-ok); font-weight: 600; }
.radar-maneder .radar-teller { margin-left: 6px; opacity: .7; }
.radarliste--arkiv { max-width: 900px; }