/* nightarc — interactive "night learns into day" curve for the overnight knowledge
   band (v5), plus its mobile scroll-fill fallback.

   Scoped entirely under .arc-wrap[data-nightarc] / .nightarc / .loop so it never
   touches anything outside that one component. The generated <svg> root keeps the
   existing "arc" class on purpose: style.css already does `.arc{display:block;
   width:100%;height:auto;overflow:visible}` and `@media(max-width:900px){.arc{
   display:none}}` — reusing that class means this file never needs to duplicate
   those rules or depend on load order. No gradient is ever applied to text. */

.arc-wrap[data-nightarc]{position:relative}
.nightarc{overflow:visible}

/* faint full-length guide line, always present, never the thick dark track */
.nightarc-guide{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1.5;stroke-linecap:round}

/* the colour reveal itself */
.nightarc-reveal{fill:none;stroke-width:6;stroke-linecap:round}

/* glowing head orb that rides the reveal point */
.nightarc-orb-halo{fill:#F9D58A;opacity:.38;filter:blur(5px)}
.nightarc-orb-core{fill:#fff}

/* dotted drop lines from each marker down towards the .loop text */
.nightarc-drop{stroke:rgba(255,255,255,.26);stroke-width:1;stroke-dasharray:2 5;stroke-linecap:round}

/* moon-phase / sun markers: dark backing disc + glyph, dim until lit */
.nightarc-ring{fill:#0A0D14}
.nightarc-marker{opacity:.32}
.nightarc-marker.is-lit{opacity:1}
.nightarc-marker .nightarc-glyph{fill:var(--mc,#fff)}

/* .loop li lighting (desktop AND mobile share this — the rail/scroll bits below
   are mobile-only on top of it) */
/* .7, not .55: dimmed steps must still read at 4.5:1 on the dark band (WCAG 1.4.3, 30 Oct 2026). */
.arc-wrap[data-nightarc].nightarc-ready .loop li{opacity:.7}
.arc-wrap[data-nightarc].nightarc-ready .loop li.is-lit{opacity:1}
.arc-wrap[data-nightarc] .loop li:nth-child(1).is-lit .ic{color:#fff}
.arc-wrap[data-nightarc] .loop li:nth-child(2).is-lit .ic{color:#fff}
.arc-wrap[data-nightarc] .loop li:nth-child(3).is-lit .ic{color:#fff}
.arc-wrap[data-nightarc] .loop li:nth-child(4).is-lit .ic{color:#fff}

@media (prefers-reduced-motion:no-preference){
  .nightarc-marker{transition:opacity .5s ease}
  .nightarc-orb{transition:opacity .25s ease}
  .nightarc-reveal{filter:drop-shadow(0 0 5px rgba(111,140,255,.4))}
  .nightarc-marker.is-lit{filter:drop-shadow(0 0 7px var(--mc,#fff))}
  .arc-wrap[data-nightarc].nightarc-ready .loop li{transition:opacity .4s ease}
  .arc-wrap[data-nightarc] .loop li .ic{transition:filter .4s ease}
  .arc-wrap[data-nightarc] .loop li:nth-child(1).is-lit .ic{filter:drop-shadow(0 0 6px rgba(111,140,255,.6))}
  .arc-wrap[data-nightarc] .loop li:nth-child(2).is-lit .ic{filter:drop-shadow(0 0 6px rgba(160,225,247,.7))}
  .arc-wrap[data-nightarc] .loop li:nth-child(3).is-lit .ic{filter:drop-shadow(0 0 6px rgba(231,184,232,.6))}
  .arc-wrap[data-nightarc] .loop li:nth-child(4).is-lit .ic{filter:drop-shadow(0 0 6px rgba(249,213,138,.6))}
}

/* touch / no hover / <900px: style.css already hides .arc and turns .loop into a
   vertical rail with a static ::before gradient line. Override that one line so it
   fills top to bottom as the user scrolls, driven by the --nightarc-fill-px custom
   property nightarc.js sets on .loop. The attribute selector gives this enough
   specificity to win regardless of stylesheet order. */
@media (max-width:900px){
  .arc-wrap[data-nightarc] .loop::before{
    top:6px;bottom:6px;height:auto;
    background:rgba(255,255,255,.14);
  }
  .arc-wrap[data-nightarc] .loop::after{
    content:"";position:absolute;left:8px;top:6px;width:2px;border-radius:2px;
    height:var(--nightarc-fill-px,0px);max-height:calc(100% - 12px);
    background:linear-gradient(180deg,#C9EEFB,#A0E1F7 40%,#E7B8E8 75%,#F9D58A);
  }
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .arc-wrap[data-nightarc] .loop::after{transition:height .15s linear}
}