/* The look "Fyren" (assets/js/teman/fyren.js, pictures in assets/js/teman/fyren-bilder.js): colours from the campaign
   and whitepaper illustrations, flat with no outlines, a lighter and a darker side per thing, and their motion.
   Everything moves once when the page opens, except the moored boats' slow rocking; prefers-reduced-motion shows the
   end state at once. Every colour is a variable, so a pale lighthouse (the gauge's base, an empty place) only
   redefines them. Used by min-kurs.html, uppfoljning.html and mitt-team.html. */
:root {
  --fy-rod: #C65D4E; --fy-rod-skugga: #A84B3F; --fy-rod-mork: #8C3E35; --fy-glans: #E7A094;
  --fy-vit: #F6F0E4; --fy-vit-skugga: #E2D8C6; --fy-torn-ljus: #FFF9EF;
  --fy-fonster: #36435A; --fy-fonster-ljus: #8DA4C2; --fy-dorr: #3B4759; --fy-karm: var(--fy-rod-mork);
  --fy-mork: #33404F; --fy-dack: #4A5666; --fy-dack-ljus: #707D8C;
  --fy-klippa: #737E8A; --fy-klippa-mork: #5C6673; --fy-klippa-ljus: #919CA8; --fy-klippa-glans: #B6BFC8; --fy-lav: #C7A55C;
  --fy-hav-ljus: #B6CDE5; --fy-hav: #8FAED3; --fy-hav-mork: #6C8EB9; --fy-skum: #E6EEF7;
  --fy-glas: #C8D3DD; --fy-glas-skugga: #B3C0CC; --fy-lins: #E1E6EB; --fy-lins-rafflor: #BCC6D0;
  --fy-ljus: #F2C35A; --fy-ljus-skugga: #E2AC45; --fy-ljus-karna: #FFF3D6; --fy-ljus-rafflor: #EDC46A; --fy-sken: #F6D888;
  --fy-tra: #C9B394; --fy-tra-ljus: #DCCAAE; --fy-tra-skugga: #A48D70; --fy-tra-mork: #85705A; --fy-tra-fog: #AE9779;
  --fy-teak: #B98C5C; --fy-rep: #B59C77;
  --fy-segel: #FBF6EC; --fy-segel-skugga: #E8DECB; --fy-som: #DCD1BC; --fy-mast: #7A6450;
  --fy-blek: #ECE7DE; --fy-blek-skugga: #DFD8CB; --fy-blek-band: #E4DDD0; --fy-blek-band-skugga: #D7CEBF; --fy-blek-mork: #CDC5B7;
  --fy-glas-nu: var(--fy-ljus);
  --fy-mjuk: cubic-bezier(.22, 1, .36, 1);
  --fy-fjader: cubic-bezier(.3, 1.4, .5, 1);
}

/* The pale lighthouse (the gauge's base) and an empty place: the same drawing in pale colours. */
.fy-blek, .fyr-ikon.tom {
  --fy-rod: var(--fy-blek-band); --fy-rod-skugga: var(--fy-blek-band-skugga); --fy-rod-mork: var(--fy-blek-mork); --fy-glans: var(--fy-blek);
  --fy-vit: var(--fy-blek); --fy-vit-skugga: var(--fy-blek-skugga); --fy-torn-ljus: #FFFFFF;
  --fy-fonster: var(--fy-blek-mork); --fy-fonster-ljus: var(--fy-blek); --fy-dorr: var(--fy-blek-mork); --fy-karm: var(--fy-blek-band-skugga);
}
.fyr-ikon.tom {
  --fy-mork: #CFCAC1; --fy-dack: #D8D3CA; --fy-klippa: #E3DFD8; --fy-klippa-mork: #D8D3CB; --fy-klippa-ljus: #ECE9E3; --fy-lav: #E3DFD8;
  --fy-glas: #E6E9EC; --fy-glas-skugga: #DCE0E4; --fy-lins: #F0F2F4;
}

/* The tower. */
.fy-rod { fill: var(--fy-rod); }
.fy-rod-skugga { fill: var(--fy-rod-skugga); }
.fy-rod-mork { fill: var(--fy-rod-mork); }
.fy-vit { fill: var(--fy-vit); }
.fy-vit-skugga { fill: var(--fy-vit-skugga); }
.fy-torn-ljus { fill: var(--fy-torn-ljus); opacity: .26; }
.fy-gallerskugga { fill: var(--fy-mork); opacity: .16; }
.fy-fonster { fill: var(--fy-fonster); }
.fy-fonster-ljus { fill: none; stroke: var(--fy-fonster-ljus); stroke-width: 1.4; stroke-linecap: round; }
.fy-dorr { fill: var(--fy-dorr); }
.fy-dorr-karm { fill: var(--fy-karm); }
.fy-kupol-glans { fill: none; stroke: var(--fy-glans); stroke-width: 2.6; stroke-linecap: round; opacity: .9; }
.fy-mork { fill: none; stroke: var(--fy-mork); stroke-linecap: round; }
.fy-mork-yta { fill: var(--fy-mork); }
.fy-dack { fill: var(--fy-dack); }
.fy-dack-ljus { fill: var(--fy-dack-ljus); }
.fy-reling { fill: none; stroke: var(--fy-mork); stroke-width: 1.7; stroke-linecap: round; }
.fy-reling-topp { fill: none; stroke: var(--fy-mork); stroke-width: 2.6; stroke-linecap: round; }
.fy-reling-ikon { stroke-width: 2.4; }

/* The lantern: dark glass; lit, it is warm yellow, warmer for every level passed. */
.fy-glas { fill: var(--fy-glas); }
.fy-glas-skugga { fill: var(--fy-glas-skugga); }
.fy-lins { fill: var(--fy-lins); }
.fy-lins-rafflor { fill: none; stroke: var(--fy-lins-rafflor); stroke-width: 1.4; stroke-linecap: round; }
.fy-niva-1 { --fy-glas-nu: #E9DFBC; } .fy-niva-2 { --fy-glas-nu: #EED593; } .fy-niva-3 { --fy-glas-nu: #F1CC73; }
.fy-glas-tand { fill: var(--fy-glas-nu); }
.fy-glas-tand-skugga { fill: var(--fy-ljus-skugga); opacity: .45; }
.fy-lins-tand { fill: var(--fy-ljus-karna); }
.fy-lins-tand-rafflor { fill: none; stroke: var(--fy-ljus-rafflor); stroke-width: 1.4; stroke-linecap: round; }
.fyr-ikon .fy-glas-tand { fill: var(--fy-ljus); }
.fy-glas-glimt { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: .6; }
.fy-ram { fill: none; stroke: var(--fy-mork); stroke-width: 2.4; stroke-linecap: round; }
.fy-ram-tunn { fill: none; stroke: var(--fy-mork); stroke-width: 1.2; opacity: .7; }
.fy-ram-ikon { stroke-width: 2.2; }
/* The light at 100 %: flat, pale wedges and a faint round glow, no gradient. */
.fy-kil { fill: var(--fy-sken); opacity: .38; }
.fy-halo { fill: var(--fy-sken); opacity: .28; }

/* The rock and the sea. */
.fy-klippa { fill: var(--fy-klippa); }
.fy-klippa-mork { fill: var(--fy-klippa-mork); }
.fy-klippa-ljus { fill: var(--fy-klippa-ljus); }
.fy-klippa-glans { fill: none; stroke: var(--fy-klippa-glans); stroke-width: 2; stroke-linecap: round; }
.fy-klippa-spricka { fill: none; stroke: var(--fy-klippa-mork); stroke-width: 1.6; stroke-linecap: round; }
.fy-lav { fill: var(--fy-lav); opacity: .9; }
.fy-hav { fill: var(--fy-hav); }
.fy-hav-ljus { fill: var(--fy-hav-ljus); }
.fy-hav-mork { fill: var(--fy-hav-mork); }
.fy-skum { fill: none; stroke: var(--fy-skum); stroke-width: 1.6; stroke-linecap: round; opacity: .9; }
.fy-krusning { fill: none; stroke: var(--fy-skum); stroke-width: 1.2; opacity: .85; }
.fy-batskugga { fill: var(--fy-hav-mork); opacity: .55; }

/* Boats: three hull colours, a teak rail, warm white sails. */
.fy-skrov-vit { --skrov: var(--fy-vit); --skrov-skugga: var(--fy-vit-skugga); --skrov-botten: var(--fy-rod-mork); --skrov-linje: var(--fy-hav-mork); }
.fy-skrov-rod { --skrov: var(--fy-rod); --skrov-skugga: var(--fy-rod-skugga); --skrov-botten: var(--fy-mork); --skrov-linje: var(--fy-vit); }
.fy-skrov-bla { --skrov: #6283AE; --skrov-skugga: #506F98; --skrov-botten: var(--fy-mork); --skrov-linje: var(--fy-vit); }
.fy-skrov { fill: var(--skrov); }
.fy-skrov-skugga { fill: var(--skrov-skugga); }
.fy-skrov-botten { fill: var(--skrov-botten); }
.fy-skrov-linje { fill: none; stroke: var(--skrov-linje); stroke-width: 1.5; stroke-linecap: round; opacity: .85; }
.fy-reling-bat { fill: var(--fy-teak); }
.fy-ara { fill: none; stroke: var(--fy-teak); stroke-width: 1.8; stroke-linecap: round; }
.fy-ara-blad { fill: var(--fy-teak); }
.fy-mast { fill: none; stroke: var(--fy-mast); stroke-width: 1.6; stroke-linecap: round; }
.fy-segel { fill: var(--fy-segel); }
.fy-segel-skugga { fill: var(--fy-segel-skugga); }
.fy-som { fill: none; stroke: var(--fy-som); stroke-width: 1; stroke-linecap: round; }
.fy-vimpel { fill: var(--fy-rod); }

/* The jetty: weathered wood. */
.fy-tra { fill: var(--fy-tra); }
.fy-tra-ljus { fill: var(--fy-tra-ljus); }
.fy-tra-skugga { fill: var(--fy-tra-skugga); }
.fy-tra-mork { fill: var(--fy-tra-mork); }
.fy-tra-fog { fill: none; stroke: var(--fy-tra-fog); stroke-width: 1.1; stroke-linecap: round; }
.fy-rep { fill: none; stroke: var(--fy-rep); stroke-width: 1.4; stroke-linecap: round; }

/* The buoy. */
.fy-bur { fill: none; stroke: var(--fy-mork); stroke-width: 2.2; stroke-linecap: round; }
.fy-boj-lampa { fill: var(--fy-glas); }
.fy-bojform.tand .fy-boj-lampa { fill: var(--fy-ljus); }
.fy-boj-lampa-skugga { fill: var(--fy-glas-skugga); }
.fy-bojform.tand .fy-boj-lampa-skugga { fill: var(--fy-ljus-skugga); }
.fy-spegling { fill: none; stroke: var(--fy-rod); stroke-width: 2; stroke-linecap: round; opacity: .3; }
.fy-ring { fill: none; stroke: var(--fy-skum); stroke-width: 2.2; stroke-linecap: round; }

/* The storm lantern: dark and pale when the week was not trained, lit when it was. */
.fy-lykta { --lykta: #AEB6BF; --lykta-ljus: #C7CDD3; }
.fy-lykta.tand { --lykta: var(--fy-mork); --lykta-ljus: var(--fy-dack-ljus); }
.fy-lykta-bygel { fill: none; stroke: var(--lykta); stroke-width: 1.8; stroke-linecap: round; }
.fy-lykta-ram { fill: var(--lykta); }
.fy-lykta-ram-ljus { fill: none; stroke: var(--lykta-ljus); stroke-width: 1.2; stroke-linecap: round; }
.fy-lykta-glas { fill: #E3E8ED; }
.fy-lykta-glas-tand { fill: var(--fy-ljus); }
.fy-lagan { fill: var(--fy-ljus-karna); }
.fy-lagan-karna { fill: #EFA94A; }
.fy-lykta-glans { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; opacity: .6; }
.fy-lykta-trad { fill: none; stroke: var(--lykta); stroke-width: 1.1; stroke-linecap: round; }
.fy-lykta-halo { fill: var(--fy-sken); opacity: .32; }

/* Sizes: each picture fills its box's width; the small lighthouse takes its height from its place. */
.fy-matare, .fy-boj, .fy-brygga, .fy-kust, .fy-lykta { display: block; width: 100%; height: auto; overflow: visible; }
.fy-ikon { display: block; height: 100%; width: auto; overflow: visible; }

/* ---- Motion: once when the page opens ---- */
/* The gauge: the painted tower is clipped from the rock up; the clip and the pointer rise, then the lantern lights. */
.fy-fyllning { transform-box: fill-box; transform-origin: 50% 100%; animation: fy-stig 2s var(--fy-mjuk) .35s backwards; }
@keyframes fy-stig { from { transform: scaleY(0); } }
.fy-visare { fill: var(--black, #121A2B); animation: fy-visa 2s var(--fy-mjuk) .35s backwards; }
@keyframes fy-visa { from { transform: translateY(0); } }
.fy-skala { stroke: var(--linje, #d5d5d3); stroke-width: 2; }
.fy-streck { stroke: var(--black, #121A2B); stroke-width: 2.5; stroke-linecap: round; }
.fy-strecktext { font: 600 22px var(--sans, sans-serif); fill: var(--dampad, #6b6e76); }
.fy-tand { animation: fy-tand .9s ease-out 2.05s backwards; }
@keyframes fy-tand { from { opacity: 0; } }
.fy-sken { transform-box: view-box; transform-origin: 64px 66px; animation: fy-sken 1.3s var(--fy-mjuk) 2.4s backwards; }
@keyframes fy-sken { from { opacity: 0; transform: scaleX(.15); } }

/* The buoy rocks once and sends two rings over the water while questions wait. */
.fy-guppa { transform-box: view-box; transform-origin: 88px 113px; }
.fy-boj.haller .fy-guppa { animation: fy-guppa 2.6s ease-in-out .6s both; }
@keyframes fy-guppa {
  0% { transform: none; } 22% { transform: translateY(2.5px) rotate(-6deg); } 50% { transform: translateY(-1px) rotate(4deg); }
  76% { transform: translateY(.5px) rotate(-1.5deg); } 100% { transform: none; }
}
.fy-ring { transform-box: view-box; transform-origin: 88px 113px; opacity: 0; animation: fy-ring 2.6s cubic-bezier(.2, .6, .35, 1) both; animation-delay: calc(1s + var(--i) * .75s); }
@keyframes fy-ring { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
.fy-boj.haller .fy-boj-lampa { animation: fy-lampa .8s ease-out .9s backwards; }
@keyframes fy-lampa { from { fill: var(--fy-glas); } }

/* The jetty: the sailboats come in one by one. */
.fy-in { animation: fy-in .9s var(--fy-mjuk) backwards; animation-delay: calc(.6s + var(--i) * .14s); }
@keyframes fy-in { from { opacity: 0; transform: translateX(-18px); } }

/* A track: a boat glides in to its post, the rope is made fast, a sail goes up; then the boats rock slowly. */
.fy-glid { animation: fy-in 1s var(--fy-mjuk) backwards; animation-delay: var(--d); }
.fy-segel-rigg, .fy-vagga, .fy-torst { transform-box: fill-box; transform-origin: 50% 100%; }
.fy-glid .fy-segel-rigg { animation: fy-hissa .9s var(--fy-fjader) backwards; animation-delay: calc(var(--d) + .55s); }
@keyframes fy-hissa { from { transform: scaleY(0); } }
.fy-vagga { animation: fy-vagga 6.5s ease-in-out infinite alternate; animation-delay: var(--g); }
@keyframes fy-vagga { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.fy-torst { animation: fy-pop .5s var(--fy-fjader) backwards; animation-delay: calc(var(--d) + .95s); }
@keyframes fy-pop { from { transform: scale(0); } }

/* A week's lantern lights. */
.fy-lykta-sken { animation: fy-tand .7s ease-out backwards; animation-delay: calc(.4s + var(--i) * 80ms); }
.fy-lykta-halo { transform-box: fill-box; transform-origin: 50% 50%; animation: fy-pop .8s var(--fy-fjader) backwards; animation-delay: calc(.5s + var(--i) * 80ms); }

/* ---- The manager's views (assets/js/uppfoljning/vy.js): the picture may play, the words stay plain ---- */
.tema-fyren .uppf-bar > span { background: var(--fy-hav-mork); }
.tema-fyren .uppf-bar.lage-efter > span, .tema-fyren .uppf-bar.lage-ej-startat > span { background: var(--fy-rod); }
.tema-fyren .ring-fyll, .tema-fyren .graf-linje { stroke: #4F76A3; }
.tema-fyren .graf-yta { fill: #E2EBF5; }
.tema-fyren .graf-prick { stroke: #4F76A3; }
.tema-fyren .kort-ikon { background: #E4ECF5; }
.tema-fyren .kpi-matare { background: #F1F5F9; }
/* The number first, at the same height in every box; the lighthouse gauge follows on the right. */
.tema-fyren .kpi { align-items: flex-start; }
.tema-fyren .kpi .matare-plats { order: 2; margin-right: 24px; }
.fyren-niva { display: inline-block; justify-self: start; font: 600 13px/1 var(--sans); padding: 7px 11px; border: 1.5px solid var(--black); border-radius: 999px;
  background: var(--vit); box-shadow: 2px 2px 0 var(--black); opacity: 0; transition: opacity 400ms 1900ms; }
.vuxen .fyren-niva { opacity: 1; }
.skord-rad .fyr-ikon { height: 46px; width: auto; margin: 0 auto; }
.tema-fyren .svit-rad span.nadd { background: var(--fy-hav-mork); border-color: var(--black); }
.bar-fyr { position: relative; display: block; padding-right: 14px; }
.bar-fyr .bar-spets { position: absolute; top: -9px; left: calc(var(--v) * (100% - 14px) - 3px); height: 22px; width: auto;
  opacity: 0; transition: opacity 300ms 900ms; }
.vuxen .bar-fyr .bar-spets { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fy-fyllning, .fy-visare, .fy-tand, .fy-sken, .fy-guppa, .fy-boj-lampa, .fy-in, .fy-glid, .fy-segel-rigg,
  .fy-vagga, .fy-torst, .fy-lykta-sken, .fy-lykta-halo { animation: none !important; }
  /* The rings stay on the water, still, so the end state still says that questions wait. */
  .fy-ring { animation: none !important; opacity: calc(.95 - var(--i) * .45); transform: scale(calc(.8 + var(--i) * .3)); }
  .fyren-niva, .bar-fyr .bar-spets { transition: none; }
}