/* Källspåret + progressbar — se kommentaren nedan. */

/* ============================================================
   Källspåret — scroll-indikator och sektionsnavigering (source-trail.js)
   Delad av de publika sidor som länkar in den här filen (startsidan,
   SamfonyFetch-sidan); markupkontraktet står överst i source-trail.js.

   Fyllningen använder logons tre färger som SEPARATA band (blå → gul →
   röd med hårda övergångar), precis som logons streck — inte en mjuk
   gradient, som skulle passera grönt mellan blått och gult. Noderna färgas
   efter vilket band de ligger i: source-trail.js sätter data-band utifrån
   nodens position, så valfritt antal sektioner fungerar. Bandgränserna
   (58 % / 88 %) finns både här och i JS:en — ändra båda.

   Fyllnaden styrs med width/height som source-trail.js sätter direkt, inte med
   clip-path + CSS-variabel: den kombinationen målades inte om pålitligt på
   ett fixerat element under skroll. background-size låser banden mot hela
   spåret/skärmbredden så att de inte trycks ihop när fyllnaden är kort.
   ============================================================ */
  :root {
    --brand-blue: #38b6ff;
    --brand-yellow: #ffde59;
    --brand-red: #ff3131;
    --brand-bands-v: linear-gradient(180deg,
      var(--brand-blue) 0 58%, var(--brand-yellow) 58% 88%, var(--brand-red) 88% 100%);
    --brand-bands-h: linear-gradient(90deg,
      var(--brand-blue) 0 58%, var(--brand-yellow) 58% 88%, var(--brand-red) 88% 100%);
  }

  .source-trail {
    display: none;            /* bara ≥1400px, se nedan */
    position: fixed;
    right: 14px;
    top: 50%;
    z-index: 1020;            /* under navbaren (1030) */
    padding: 10px 6px;
    border-radius: 999px;
    /* Marinblå kapsel (samma ton som .cta-band) — syns mot ljusa sektioner
       och smälter in i det mörka statistikbandet utan att bli grå. */
    background: rgba(13, 42, 82, 0.9);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 30px rgba(13, 42, 82, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translate(12px, -50%);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  .source-trail.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%);
  }

  .source-trail-list {
    position: relative;
    z-index: 1;               /* noderna ovanpå spåret */
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Spåret går från första till sista nodens mittpunkt:
     6px padding + 11px halv nod (sidled), 10px padding + 11px (höjd). */
  .source-trail-track {
    position: absolute;
    left: 16px;
    top: 21px;
    bottom: 21px;
    width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
  }
  .source-trail-fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;                 /* sätts av source-trail.js */
    border-radius: inherit;
    background: var(--brand-bands-v) no-repeat;
    background-size: 100% 204px;   /* spårets höjd; source-trail.js skriver över med uppmätt värde */
    /* Neutraliserar en äldre regel: home.css hade tidigare clip-path styrd av
       --trail-progress, som JS:en inte längre sätter. En cachad kopia av den
       filen (frontbase laddade den utan ?v) klippte bort hela fyllningen i
       Edge. */
    clip-path: none;
  }

  /* Noden: länken är en 22px träffyta; själva pricken ritas i ::before och
     pulsringen i ::after. Färgen (--node-color) ärvs av båda. */
  .source-trail-node {
    --node-color: var(--brand-blue);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    text-decoration: none;
    color: var(--node-color);
  }
  .source-trail-node[data-band="yellow"] { --node-color: var(--brand-yellow); }
  .source-trail-node[data-band="red"]    { --node-color: var(--brand-red); }

  .source-trail-node::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0d2a52;
    border: 2px solid rgba(255, 255, 255, 0.45);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  }
  .source-trail-node.is-passed::before {
    background: var(--node-color);
    border-color: var(--node-color);
  }
  .source-trail-node[aria-current]::before {
    transform: scale(1.35);
    background: #0d2a52;
    border-color: var(--node-color);
    border-width: 3px;
  }
  .source-trail-node[aria-current]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    border: 2px solid currentColor;
    animation: trail-ping 2.2s ease-out infinite;
    pointer-events: none;
  }
  @keyframes trail-ping {
    0%   { transform: scale(1);   opacity: 0.75; }
    80%  { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
  }
  .source-trail-node:hover::before {
    transform: scale(1.25);
  }

  /* Etiketten: dold tills hover/fokus, eller kort när du går in i en ny
     sektion (.is-announcing sätts av source-trail.js i ~1.8 s). Den är alltid kvar i
     DOM:en, så skärmläsare läser länktexten. */
  .source-trail-label {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    padding: 5px 11px;
    border-radius: 999px;
    background: #ffffff;
    color: #0d2a52;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(13, 42, 82, 0.22);
    opacity: 0;
    transform: translate(6px, -50%);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
  }
  .source-trail-label::after {      /* liten pil mot noden */
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background: inherit;
    transform: rotate(45deg);
  }
  .source-trail-node:hover .source-trail-label,
  .source-trail-node:focus-visible .source-trail-label,
  .source-trail-node.is-announcing .source-trail-label {
    opacity: 1;
    transform: translate(0, -50%);
  }
  .source-trail-node:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
  }

  /* Progressbar (alla bredder): samma färgband, fäst i navbarens UNDERKANT — inte i
     skärmens överkant. Mobil-Safari flyttar hela det fixerade lagret uppåt
     under statusfältet när adressfältet döljs vid skroll; en bar på top:0
     hamnade då utanför bild. source-trail.js sätter top till navbarens uppmätta höjd
     (och mäter om när mobilmenyn fälls ut), så baren följer alltid navbaren.
     72px är bara startvärdet innan JS:en hunnit mäta. */
  .scroll-progress {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    height: 5px;
    /* Under the navbar (1030), not above it: the bar sits at the navbar's
       bottom edge, so it never covers the navbar itself — but at 1031 it
       painted across the navbar's dropdown menus (Riksdagen), which live
       inside the navbar's stacking context and cannot rise above it. Still
       above the page content and the source trail (1020). */
    z-index: 1029;
    pointer-events: none;
    background: rgba(13, 42, 82, 0.08);   /* svagt spår så att baren syns även tom */
  }
  .scroll-progress-bar {
    display: block;
    width: 0;                  /* sätts av source-trail.js */
    height: 100%;
    background: var(--brand-bands-h) no-repeat;
    background-size: 100vw 100%;   /* banden ligger fast mot skärmen */
    box-shadow: 0 0 8px rgba(56, 182, 255, 0.45);
    clip-path: none;               /* se .source-trail-fill ovan */
  }

  /* Baren visas på alla bredder; spåret kommer till från 1400px, där det
     finns plats bredvid innehållet. */
  @media (min-width: 1400px) {
    .source-trail { display: block; }
  }

  @media (prefers-reduced-motion: reduce) {
    .source-trail-node[aria-current]::after { animation: none; opacity: 0; }
    .source-trail,
    .source-trail-node::before,
    .source-trail-label { transition: none; }
  }