/* Formprov D: Säkerhet, omgång 6. Bara det som är unikt för sidan; allt gemensamt ligger i ../gemensam.css.
   Sidan läses av dataskyddsombud och IT, ofta i flera omgångar och den avgör ofta affären. Därför tydlig och lugn
   snarare än filmisk: en stilla hero, sedan morgonens ton med en fast innehållsförteckning till vänster på dator
   och en rad med länkar på mobil. Två textstorlekar per avsnitt. */

/* Heron: det frostade glaset med varmt ljus bakom. Rubriken står mot den mörka gardinen och glasets överkant,
   meningen och knappen mot karmen längst ned. Ljuset bakom glaset andas en gång när sidan laddas. */
.sakerhet-hero {
  --fokus-x: .5; --fokus-y: .5;
  --ljus-x: 50%; --ljus-y: 42%; --ljus-b: 46%; --ljus-h: 56%; --ljus-farg: rgba(255, 168, 88, .5); --ljus-styrka: .4;
}
.sakerhet-hero::before {
  background:
    radial-gradient(ellipse 52% 44% at 22% 22%, rgba(4, 10, 16, .42), rgba(4, 10, 16, 0) 100%),
    linear-gradient(rgba(4, 10, 16, .5), rgba(4, 10, 16, 0) 26%),
    linear-gradient(to top, rgba(4, 10, 16, .78), rgba(4, 10, 16, .4) 18%, rgba(4, 10, 16, 0) 34%);
}
.sakerhet-hero .hero-ingress { margin-top: auto; max-width: 38rem; }
.sakerhet-hero .hero-ingress strong { font-weight: 600; }
@media (min-width: 761px) {
  .sakerhet-hero h1 { font-size: clamp(3rem, min(6.4vw, 9vh), 7rem); }
}
@keyframes ljus-andas { 0% { opacity: .12; } 45% { opacity: .95; } 100% { opacity: var(--ljus-styrka); } }
.skript .sakerhet-hero .sida-hero-bild::after { animation: none; }
.skript .sakerhet-hero .sida-hero-ljus { animation: ljus-andas 5.5s ease-in-out .4s both; }
@media (max-width: 760px) {
  .sakerhet-hero { --fokus-x: .4; }
  .sakerhet-hero .knappar { margin-top: clamp(14px, 2vh, 22px); }
}

/* Innehållet med en fast innehållsförteckning till vänster. Den markerar avsnittet man läser (gemensam.js). */
.sak-ram { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); padding-block: var(--luft); }
.sak-toc { position: sticky; top: calc(var(--sidhuvud) + 36px); align-self: start; }
.sak-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--linje-stark); }
.sak-toc a {
  display: block; margin-left: -1px; padding: 9px 0 9px 18px; border-left: 2px solid transparent;
  color: var(--ink-mjuk); text-decoration: none; font-size: 1rem; line-height: 1.35; transition: color .2s ease, border-color .2s ease;
}
.sak-toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
.sak-toc a[aria-current] { border-left-color: var(--trad-morgon); color: var(--ink); font-weight: 600; }
.sak-del + .sak-del { margin-top: clamp(56px, 9vh, 96px); padding-top: clamp(56px, 9vh, 96px); border-top: 1px solid var(--linje-stark); }
.sak-del h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); margin-bottom: 12px; }
.sak-under { margin: 0 0 clamp(28px, 4vh, 40px); font-size: clamp(1.08rem, 1.02rem + .25vw, 1.2rem); color: var(--ink-mjuk); }
@media (max-width: 960px) {
  .sak-ram { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sak-toc { position: static; }
  .sak-toc ol { display: flex; flex-wrap: wrap; gap: 8px; border-left: 0; }
  .sak-toc a { margin: 0; padding: 8px 14px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linje-stark); color: var(--ink); font-size: .95rem; }
  .sak-toc a[aria-current] { box-shadow: inset 0 0 0 1.5px var(--trad-morgon); }
}

/* Sex saker att veta: sex rutor, var och en med en liten form i stället för en ikon. Formerna står stilla eller
   ritas fram en gång. Tunna linjer, rundade ändar, ingen fyllning utom där den betyder något. */
.sex { list-style: none; margin: clamp(24px, 4vh, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sex li { display: flex; flex-direction: column; padding: 22px 22px 24px; border-radius: 14px; background: var(--vit); box-shadow: 0 0 0 1px var(--kant); }
.sex b { font-family: var(--rubrik); font-size: 1.15rem; font-weight: 620; line-height: 1.3; }
.sex span { margin-top: 6px; color: var(--ink-mjuk); font-size: 1rem; line-height: 1.5; }
.sex-form { width: 120px; height: 64px; margin-bottom: 16px; overflow: visible; }
.sex-form .tunn { fill: none; stroke: #6B7F84; stroke-width: 1.5; stroke-linecap: round; }
.sex-form .streckad { fill: none; stroke: #9AABA8; stroke-width: 1.5; stroke-dasharray: 4 5; stroke-linecap: round; }
.sex-form .vald { fill: none; stroke: var(--trad-morgon); stroke-width: 1.8; }
.sex-form .prick { fill: var(--trad-morgon); }
.sex-form .streck { fill: none; stroke: var(--trad-morgon); stroke-width: 2; stroke-linecap: round; }
.sex-form .streck-ljus { fill: none; stroke: #9AABA8; stroke-width: 1.5; stroke-linecap: round; }
.sex-form .bubbla-form { fill: none; stroke: #0B6B63; stroke-width: 1.6; stroke-linejoin: round; }
.sex-form .nyckel { fill: none; stroke: var(--trad-morgon); stroke-width: 1.8; stroke-linecap: round; }
.sex-form .maskerat { font: 600 13px var(--sans); fill: #6B7F84; letter-spacing: 1px; }
.sex-form .sex-etikett { font: 650 11px var(--sans); fill: #41585E; }
.gallring-form circle { fill: var(--trad-morgon); }
@media (max-width: 1180px) { .sex { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sex { grid-template-columns: minmax(0, 1fr); } }

/* Vem ser vad, och hur länge? Uppgifternas väg som en ljustråd med fem stationer. Tråden är listans ::before och
   ritas med scrollen (gemensam.js sätter --trad och .nadd på stationerna). Rubrikraden visar vad spalterna är. */
.vag-huvud {
  display: grid; grid-template-columns: 11rem repeat(3, minmax(0, 1fr)); gap: 0 24px; margin-top: clamp(24px, 4vh, 36px);
  padding: 0 0 10px 40px; border-bottom: 1px solid var(--linje-stark); font-size: .92rem; font-weight: 600; color: var(--ink-mjuk);
}
.vag { position: relative; list-style: none; margin: 0 0 clamp(40px, 6vh, 56px); padding: 0 0 0 40px; }
.vag::before { content: ""; position: absolute; left: 9.25px; top: 30px; bottom: 34px; border-left: 1.5px solid var(--trad-morgon); transform-origin: 50% 0; }
.stationer-aktiv.vag::before { transform: scaleY(var(--trad, 0)); }
.vag li { position: relative; display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--linje); }
.vag li::before {
  content: ""; position: absolute; left: -37px; top: 24px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--sjogron); box-shadow: inset 0 0 0 1.5px var(--trad-morgon), 0 0 0 5px var(--morgon); transition: background-color .3s ease;
}
.stationer-aktiv li:not(.nadd)::before { background: var(--morgon); }
.vag h3 { font-size: 1.2rem; font-weight: 620; line-height: 1.3; }
.vag dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; margin: 0; }
.vag dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vag dd { margin: 0; line-height: 1.5; }
.tabell-rubrik { margin: 0; font-size: 1.2rem; font-weight: 620; }
.tabell-detalj summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; cursor: pointer; list-style: none; }
.tabell-detalj summary::-webkit-details-marker { display: none; }
.tabell-detalj summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--accent); transition: transform .3s ease; }
.tabell-detalj[open] summary::after { transform: rotate(45deg); }
.tabell-detalj[open] summary { margin-bottom: 4px; }
@media (max-width: 760px) { .tabell-detalj summary { border-block: 1px solid var(--linje); padding: 16px 0; } }
@media (max-width: 860px) {
  .vag-huvud { display: none; }
  .vag li { grid-template-columns: minmax(0, 1fr); }
  .vag dl { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vag dt { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: .88rem; font-weight: 600; color: var(--ink-mjuk); }
}

/* Roller i två spalter, och AI:ns roll som en lista i två spalter */
.roller { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(28px, 4vw, 64px); }
.roller h3 { font-size: 1.35rem; margin-bottom: 4px; }
.roll { margin: 0 0 14px; color: var(--ink-mjuk); }
.ai-lista { columns: 2; column-gap: clamp(28px, 4vw, 64px); }
.ai-lista li { break-inside: avoid; }
@media (max-width: 760px) { .roller { grid-template-columns: minmax(0, 1fr); } .ai-lista { columns: 1; } }

/* Hur är tjänsten byggd? Ett lugnt arkitekturdiagram uppifrån och ned, med avtalet bredvid. Punkterna i rutorna är
   originalets punkter om hur tjänsten är byggd. */
.teknik-rad { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px clamp(32px, 4vw, 64px); align-items: start; }
.ark { margin: 0; }
.ark-ruta { padding: 14px 18px; border-radius: 12px; background: var(--vit); box-shadow: inset 0 0 0 1px var(--linje-stark); }
.ark-ruta b { display: block; font-family: var(--rubrik); font-size: 1.08rem; font-weight: 620; line-height: 1.3; }
.ark-ruta span { display: block; margin-top: 3px; font-size: .95rem; line-height: 1.45; color: var(--ink-mjuk); }
.ark-webblasare { box-shadow: inset 0 0 0 1px var(--linje-stark), inset 4px 0 0 var(--honung); }
.ark-personal { box-shadow: inset 0 0 0 1px var(--linje-stark), inset 4px 0 0 #0B6B63; }
.ark-led { position: relative; margin: 0; padding: 14px 0 14px 44px; font-size: .9rem; font-weight: 600; color: var(--ink-mjuk); }
.ark-led::before { content: ""; position: absolute; left: 28px; top: 0; bottom: 0; border-left: 1.5px solid var(--linje-stark); }
.ark-led::after {
  content: ""; position: absolute; left: 22.5px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; background: var(--ink-mjuk);
  -webkit-mask: var(--las) center / contain no-repeat; mask: var(--las) center / contain no-repeat;
  --las: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2M3.5 7h9v6.5h-9z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ark-miljo { display: grid; gap: 10px; padding: 16px; border-radius: 16px; border: 1.5px dashed var(--linje-stark); background: var(--morgon-2); }
.ark-miljo-namn { margin: 0 0 2px; font-size: .95rem; font-weight: 650; color: #41585E; }
.ark figcaption { margin-top: 12px; }
.avtal h3 { font-size: 1.35rem; margin-bottom: 14px; }
@media (max-width: 1100px) { .teknik-rad { grid-template-columns: minmax(0, 1fr); } }

/* Vanliga frågor i innehållsspalten */
.sak-del.fragor .fragor-huvud { position: static; margin-bottom: 20px; }
.sak-del.fragor .fragor-huvud h2 { margin-bottom: 8px; }