/* The look "Skogen" (assets/js/teman/skogen.js, pictures in assets/js/teman/skogen-bilder.js): a Swedish spruce forest,
   calm and moss green. Colours like the campaign and whitepaper illustrations, flat with no outlines, a darker left and
   a lighter right side on every object. Everything moves once when the page opens, except a very slow sway of the
   spruces on the forest floor; prefers-reduced-motion shows the end state at once. Used by min-kurs.html,
   uppfoljning.html and mitt-team.html. */
:root {
  --sk-gran-ljus: #6E9677; --sk-gran: #557D62; --sk-gran-mork: #3F624E; --sk-gran-skugga: #2F4C3C; --sk-gran-glans: #9DBE98;
  --sk-stam: #8B5D3F; --sk-stam-mork: #6B432C; --sk-stam-ljus: #B07C57;
  --sk-blek: #E7EAE1; --sk-blek-mork: #DCE0D4; --sk-blek-ljus: #F1F3EC; --sk-blek-skugga: #CFD5C6;
  --sk-mossa: #8E9E55; --sk-mossa-mork: #72823F; --sk-mossa-ljus: #B0BF74;
  --sk-sten: #A9ABA4; --sk-sten-mork: #8A8D86; --sk-sten-ljus: #CDCFC8;
  --sk-jord: #6C5444; --sk-jord-mork: #574336; --sk-jord-barr: #937459; --sk-grop: #4E3B2F;
  --sk-kotte: #9C6641; --sk-kotte-skugga: #7D4D2F; --sk-kotte-fjall: #6A3F26; --sk-kotte-glans: #C58F63;
  --sk-naver: #F0EADD; --sk-naver-flata: #E2D9C7; --sk-naver-sida: #B9AD95; --sk-naver-streck: #4C4842;
  --sk-naver-kant: #D6C9AF; --sk-naver-insida: #B07A52; --sk-naver-insida-mork: #8E5C3B;
  --sk-moln: #EEF1F4; --sk-moln-mork: #DCE2E9; --sk-moln-ljus: #FAFBFC;
  --sk-regnmoln: #D2DAE3; --sk-regnmoln-mork: #B7C3D0; --sk-regnmoln-ljus: #E8EDF2;
  --sk-vatten: #8DB2DA;
  --sk-mjuk: cubic-bezier(.22, 1, .36, 1);
  --sk-fjader: cubic-bezier(.3, 1.35, .5, 1);
}

/* The spruce: three greens, a shadow under every tier, parting lines and a glint on the lit tips. */
.sk-gran { fill: var(--sk-gran); }
.sk-gran-mork { fill: var(--sk-gran-mork); }
.sk-gran-ljus { fill: var(--sk-gran-ljus); }
.sk-gran-skugga { fill: var(--sk-gran-skugga); opacity: .45; }
.sk-barr { fill: none; stroke: var(--sk-gran-skugga); stroke-linecap: round; opacity: .55; }
.sk-glans { fill: none; stroke: var(--sk-gran-glans); stroke-linecap: round; opacity: .9; }
.sk-glans-mork { fill: none; stroke: var(--sk-gran); stroke-linecap: round; opacity: .9; }
.sk-stam { fill: var(--sk-stam); }
.sk-stam-mork { fill: var(--sk-stam-mork); }
.sk-stam-ljus { fill: none; stroke: var(--sk-stam-ljus); stroke-linecap: round; }
/* The pale spruce under the gauge's fill, and an empty place in the manager's harvest row. */
.sk-blek .sk-gran, .sk-blek .sk-stam { fill: var(--sk-blek); }
.sk-blek .sk-gran-mork, .sk-blek .sk-stam-mork { fill: var(--sk-blek-mork); }
.sk-blek .sk-gran-ljus { fill: var(--sk-blek-ljus); }
.sk-blek .sk-glans-mork { stroke: var(--sk-blek); }
.sk-blek .sk-gran-skugga { fill: var(--sk-blek-skugga); }
.sk-blek .sk-barr { stroke: var(--sk-blek-skugga); }
.sk-blek .sk-glans, .sk-blek .sk-stam-ljus { stroke: var(--sk-blek-ljus); }
.sk-blek .sk-mossa, .sk-blek .sk-sten { fill: var(--sk-blek); }
.sk-blek .sk-mossa-mork, .sk-blek .sk-sten-mork { fill: var(--sk-blek-mork); }
.sk-blek .sk-mossa-ljus, .sk-blek .sk-sten-ljus, .sk-blek .sk-mossa-prick { stroke: var(--sk-blek-ljus); }

/* Moss, stones, the forest floor, drops. */
.sk-mossa { fill: var(--sk-mossa); }
.sk-mossa-mork { fill: var(--sk-mossa-mork); }
.sk-mossa-ljus { fill: none; stroke: var(--sk-mossa-ljus); stroke-linecap: round; }
.sk-mossa-prick { fill: none; stroke: var(--sk-mossa-mork); stroke-linecap: round; }
.sk-sten { fill: var(--sk-sten); }
.sk-sten-mork { fill: var(--sk-sten-mork); }
.sk-sten-ljus { fill: none; stroke: var(--sk-sten-ljus); stroke-linecap: round; }
.sk-jord { fill: var(--sk-jord); }
.sk-jord-mork { fill: var(--sk-jord-mork); }
.sk-jord-barr { fill: none; stroke: var(--sk-jord-barr); stroke-width: 2; stroke-linecap: round; }
.sk-grop { fill: var(--sk-grop); }
.sk-droppe-yta { fill: var(--sk-vatten); }
.sk-droppe-ljus { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: .85; }

/* The cone. */
.sk-kotte-kropp { fill: var(--sk-kotte); }
.sk-kotte-skugga { fill: var(--sk-kotte-skugga); }
.sk-kotte-fjall { fill: none; stroke: var(--sk-kotte-fjall); stroke-width: 1.7; stroke-linecap: round; opacity: .8; }
.sk-kotte-glans { fill: none; stroke: var(--sk-kotte-glans); stroke-width: 2.4; stroke-linecap: round; }

/* The gauge: the coloured spruce is clipped from the foot up; the clip and the pointer rise once. */
.sk-matare { display: block; width: 100%; height: auto; overflow: visible; }
.sk-fyllning { transform-box: fill-box; transform-origin: 50% 100%; animation: sk-stig 2s var(--sk-mjuk) .35s backwards; }
@keyframes sk-stig { from { transform: scaleY(0); } }
.sk-visare { fill: var(--black, #121A2B); animation: sk-visa 2s var(--sk-mjuk) .35s backwards; }
@keyframes sk-visa { from { transform: translateY(0); } }
.sk-skala { stroke: var(--linje, #d5d5d3); stroke-width: 2.4; }
.sk-streck { stroke: var(--black, #121A2B); stroke-width: 3; stroke-linecap: round; }
.sk-strecktext { font: 600 27px var(--sans, sans-serif); fill: var(--dampad, #6b6e76); }

/* A track's forest floor: the spruce grows up from the moss, the cone and the drop come after; then a slow sway. */
.sk-skogsrad { display: block; width: 100%; height: auto; overflow: visible; }
.sk-vaxa, .sk-gunga, .sk-pop, .sk-vecka-vaxt, .sk-korg-kotte { transform-box: fill-box; transform-origin: 50% 100%; }
.sk-pop { transform-origin: 50% 50%; }
.sk-vaxa { animation: sk-vaxa 1.1s var(--sk-fjader) backwards; animation-delay: var(--d); }
.sk-gunga { animation: sk-gunga 7s ease-in-out infinite alternate; animation-delay: var(--g); }
.sk-pop { animation: sk-poppa .5s var(--sk-fjader) backwards; animation-delay: calc(var(--d) + .9s); }
@keyframes sk-vaxa { from { transform: scale(.15, 0); } }
@keyframes sk-poppa { from { transform: scale(0); } }
@keyframes sk-gunga { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }

/* The cloud: calm and light; with questions waiting a fuller grey-blue cloud rains once, then stays still. */
.sk-moln { display: block; width: 100%; height: auto; overflow: visible; }
.sk-moln-yta { fill: var(--sk-moln); }
.sk-moln-mork { fill: var(--sk-moln-mork); }
.sk-moln-ljus { fill: var(--sk-moln-ljus); }
.sk-moln.haller .sk-moln-yta { fill: var(--sk-regnmoln); }
.sk-moln.haller .sk-moln-mork { fill: var(--sk-regnmoln-mork); }
.sk-moln.haller .sk-moln-ljus { fill: var(--sk-regnmoln-ljus); }
.sk-moln-kropp { transform-box: fill-box; transform-origin: 50% 100%; animation: sk-driva 1.8s var(--sk-mjuk) .2s backwards; }
@keyframes sk-driva { from { transform: translateX(-8px); } }
.sk-moln.haller .sk-moln-kropp { animation: sk-svalla 1.4s ease-in-out .5s both; }
@keyframes sk-svalla { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.03, .96); } }
.sk-regn { animation: sk-regna .9s cubic-bezier(.5, 0, .9, .6) both; animation-delay: calc(.9s + var(--i) * .14s); }
@keyframes sk-regna { 0% { opacity: 0; translate: 0 -26px; } 25% { opacity: 1; } 100% { opacity: 1; translate: 0 0; } }

/* The birch-bark basket: the cones rise into it one by one. */
.sk-korg { display: block; width: 100%; height: auto; overflow: visible; }
.sk-naver, .sk-naver-cell { fill: var(--sk-naver); }
.sk-naver-flata { fill: var(--sk-naver-flata); }
.sk-naver-sida { fill: var(--sk-naver-sida); opacity: .4; }
.sk-naver-streck { fill: none; stroke: var(--sk-naver-streck); stroke-width: 1.7; stroke-linecap: round; opacity: .55; }
.sk-naver-kanter { fill: none; stroke: var(--sk-naver-sida); stroke-width: 1; opacity: .7; }
.sk-handtag { fill: none; stroke: var(--sk-naver-kant); stroke-linecap: round; }
.sk-handtag-ljus { fill: none; stroke: var(--sk-naver); stroke-linecap: round; }
.sk-naver-kant { fill: none; stroke: var(--sk-naver-kant); stroke-linecap: round; }
.sk-naver-kant-ljus { fill: none; stroke: var(--sk-naver); stroke-linecap: round; transform: translateY(-1.5px); }
.sk-naver-insida { fill: var(--sk-naver-insida); }
.sk-naver-insida-mork { fill: var(--sk-naver-insida-mork); }
.sk-korg-kotte { animation: sk-upp-korg .8s var(--sk-mjuk) backwards; animation-delay: calc(.6s + var(--i) * .12s); }
@keyframes sk-upp-korg { from { transform: translateY(30px); } }

/* A week's sapling and the seed. */
.sk-vecka { display: block; width: 100%; height: auto; overflow: visible; }
.sk-vecka-vaxt { animation: sk-vaxa .9s var(--sk-fjader) backwards; animation-delay: calc(.4s + var(--i) * 80ms); }
.sk-fro-vinge { fill: #C9A57E; }
.sk-fro-karna { fill: var(--sk-stam-mork); }

/* The small spruce (the harvest row, the tip of a bar, the chart's milestones). */
.sk-ikon { display: block; height: 100%; width: auto; overflow: visible; }

/* ---- The manager's views (assets/css/uppfoljning.css has the shared parts) ------------------------------------ */
.tema-skogen { --sk-bar: #557D62; --sk-bar-efter: #A0683F; }
.tema-skogen .uppf-bar > span { background: var(--sk-bar); }
.tema-skogen .uppf-bar.lage-efter > span, .tema-skogen .uppf-bar.lage-ej-startat > span { background: var(--sk-bar-efter); }
.tema-skogen .ring-fyll, .tema-skogen .graf-linje { stroke: var(--sk-bar); }
.tema-skogen .graf-yta { fill: #E2EBE1; }
.tema-skogen .graf-prick { stroke: var(--sk-bar); }
.tema-skogen .kort-ikon { background: #E4ECE3; }
.tema-skogen .kpi-matare { background: #F3F6EF; }
/* The number first, at the same height in every box; the spruce gauge follows on the right. */
.tema-skogen .kpi { align-items: flex-start; }
.tema-skogen .kpi .matare-plats { order: 2; margin-right: 30px; }
/* The spruce is broad, so its gauge gets a wider place than the carrot's to stand as tall (owner 2026-10-20). */
.tema-skogen .matare-plats { width: 150px; }
[data-tema="skogen"] .mk-figur-matare { width: 160px; }
.skogen-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 .skogen-niva { opacity: 1; }
.tema-skogen .skord-rad { max-width: 300px; }
.skord-rad .trad-ikon { height: 40px; width: auto; max-width: 100%; margin: 0 auto; }
.tema-skogen .svit-rad span.nadd { background: var(--sk-bar); border-color: var(--black); }
.bar-gran { position: relative; display: block; padding-right: 14px; }
.bar-gran .bar-spets { position: absolute; top: -10px; left: calc(var(--v) * (100% - 14px) - 7px); height: 24px; width: auto;
  opacity: 0; transition: opacity 300ms 900ms; }
.vuxen .bar-gran .bar-spets { opacity: 1; }

@media (max-width: 640px) {
  .tema-skogen .matare-plats { width: 120px; }
  [data-tema="skogen"] .mk-figur-matare { width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-fyllning, .sk-visare, .sk-vaxa, .sk-gunga, .sk-pop, .sk-moln-kropp, .sk-regn, .sk-korg-kotte, .sk-vecka-vaxt { animation: none !important; }
  .skogen-niva, .bar-gran .bar-spets { transition: none; }
}
/* The spruce is broad: the line under the number keeps to one line beside it. */
[data-tema="skogen"] .mk-klart .mk-under { white-space: nowrap; }