/* The look "Bygget" (assets/js/teman/bygget.js, pictures in assets/js/teman/bygget-bilder.js): brick, concrete, steel
   blue-grey and a dull crane yellow, flat with no outlines, a lighter and a darker side on everything; and the motion.
   Everything moves once when the page opens; prefers-reduced-motion shows the end state at once. Used by min-kurs.html,
   uppfoljning.html and mitt-team.html. */
:root {
  --by-tegel: #C26A4F; --by-tegel-skugga: #A5553E; --by-tegel-ljus: #D88B70; --by-fog: #96503A; --by-tegel-glans: #E3A58D;
  --by-tegel-hal: #8C4733;
  --by-betong: #B8B4AB; --by-betong-ljus: #D4D0C7; --by-betong-skugga: #9D998F; --by-betong-mork: #827E75;
  --by-stal: #6F8398; --by-stal-mork: #55687D; --by-stal-ljus: #9AABBD; --by-stal-skugga: #4B5D71;
  --by-ruta: #4C6280; --by-glans: #A9BED3; --by-tand: #F2C76A; --by-tand-glans: #FFF0C4; --by-ram: #F1E8D8; --by-dorr: #52667E;
  --by-kran: #DEAB4C; --by-kran-mork: #BB8B37; --by-kran-ljus: #EDC572; --by-kran-glans: #F7DFA5;
  --by-tak: #5A6A80; --by-tak-mork: #46556A; --by-tak-ljus: #7A8BA1;
  --by-tra: #D9A160; --by-tra-ljus: #EBBE83; --by-tra-skugga: #BC8445; --by-tra-mork: #8F5D31; --by-tra-adring: #C08443;
  --by-grus: #9F8F80; --by-grus-mork: #857566; --by-grus-ljus: #BCAE9F;
  --by-kon: #E27F43; --by-kon-mork: #C2662F; --by-kon-band: #F7EEE2;
  --by-murbruk: #D6D0C4;
  --by-blek: #ECE6DA; --by-blek-skugga: #DFD7C8; --by-blek-ljus: #F6F2EA; --by-blek-linje: #CDC3B0;
  --by-mjuk: cubic-bezier(.22, 1, .36, 1);
  --by-fjader: cubic-bezier(.3, 1.4, .5, 1);
}

/* Brick, concrete, steel, windows. */
.by-tegel { fill: var(--by-tegel); }
.by-tegel-skugga { fill: var(--by-tegel-skugga); }
.by-tegel-ljus { fill: var(--by-tegel-ljus); }
.by-tegel-hal { fill: var(--by-tegel-hal); }
.by-tegel-prick { fill: var(--by-fog); opacity: .55; }
.by-tegel-glans { fill: none; stroke: var(--by-tegel-glans); stroke-linecap: round; opacity: .7; }
.by-fog { fill: none; stroke: var(--by-fog); stroke-width: 2.2; stroke-linecap: round; opacity: .7; }
.by-fog-ljus { fill: none; stroke: var(--by-tegel-skugga); stroke-width: 1; stroke-linecap: round; opacity: .55; }
.by-betong { fill: var(--by-betong); }
.by-betong-ljus { fill: var(--by-betong-ljus); }
.by-betong-skugga { fill: var(--by-betong-skugga); }
.by-betong-mork { fill: var(--by-betong-mork); }
.by-kant-ljus, .by-kant-skugga, .by-kant-mork { fill: none; stroke-width: 1.4; stroke-linecap: round; }
.by-kant-ljus { stroke: var(--by-betong-ljus); }
.by-kant-skugga { stroke: var(--by-betong-skugga); }
.by-kant-mork { stroke: var(--by-betong-mork); stroke-width: 1; }
.by-betong-linje { fill: none; stroke: var(--by-betong-skugga); stroke-width: 1.2; stroke-linecap: round; }
.by-stal { fill: var(--by-stal); }
.by-stal-mork { fill: var(--by-stal-mork); }
.by-stal-skugga { fill: var(--by-stal-skugga); }
.by-stal-ljus { fill: var(--by-stal-ljus); }
.by-stal-kant { fill: none; stroke: var(--by-stal-ljus); stroke-width: 1.4; stroke-linecap: round; }
.by-ram { fill: var(--by-ram); }
.by-ram-linje { fill: none; stroke: var(--by-ram); stroke-width: 2; }
.by-ruta { fill: var(--by-ruta); }
.by-tand { fill: var(--by-tand); }
.by-glans { fill: none; stroke: var(--by-glans); stroke-width: 2; stroke-linecap: round; opacity: .8; }
.by-tand-glans { fill: none; stroke: var(--by-tand-glans); stroke-width: 2; stroke-linecap: round; }
.by-dorr { fill: var(--by-dorr); }
.by-dorr-ljus { fill: var(--by-stal); }
.by-puts { fill: var(--by-ram); }

/* The pale house under the gauge: the same drawing in the carrot's pale tones. */
.by-blek :is(.by-tegel, .by-ram, .by-puts, .by-betong-ljus, .by-tand, .by-ruta, .by-dorr, .by-dorr-ljus) { fill: var(--by-blek); }
.by-blek :is(.by-tegel-skugga, .by-betong-skugga, .by-betong) { fill: var(--by-blek-skugga); }
.by-blek .by-tegel-ljus { fill: var(--by-blek-ljus); }
.by-blek :is(.by-fog, .by-ram-linje, .by-kant-skugga) { stroke: var(--by-blek-linje); }
.by-blek .by-kant-ljus { stroke: var(--by-blek-ljus); }
.by-blek :is(.by-glans, .by-tand-glans) { stroke: var(--by-blek-ljus); }
.by-blek .by-ruta, .by-blek .by-tand { fill: var(--by-blek-skugga); }

/* The crane yellow: the crane, the hook block, the hard hat. */
.by-kran { fill: var(--by-kran); }
.by-kran-mork { fill: var(--by-kran-mork); }
.by-kran-ljus { fill: var(--by-kran-ljus); }
.by-kran-kant { fill: none; stroke: var(--by-kran-ljus); stroke-width: 1.8; stroke-linecap: round; }
.by-kran-glans { fill: none; stroke: var(--by-kran-glans); stroke-width: 3.4; stroke-linecap: round; }
.by-gitter-mork { fill: none; stroke: var(--by-kran-mork); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.by-gitter-ljus { fill: none; stroke: var(--by-kran); stroke-width: 1.2; stroke-linecap: round; }
.by-stag { fill: none; stroke: var(--by-stal-mork); stroke-width: 1.3; stroke-linecap: round; }
.by-lina { fill: none; stroke: var(--by-stal-skugga); stroke-width: 1.2; }
.by-sling { fill: none; stroke: var(--by-stal-mork); stroke-width: 1.5; stroke-linecap: round; }
.by-krok { fill: none; stroke: var(--by-stal-mork); stroke-width: 3; stroke-linecap: round; }

/* The gauge: the coloured house is clipped from the ground up; the clip and the pointer rise once. */
.by-matare { display: block; width: 100%; height: auto; overflow: visible; }
.by-fyllning { transform-box: fill-box; transform-origin: 50% 100%; animation: by-stig 2s var(--by-mjuk) .35s backwards; }
@keyframes by-stig { from { transform: scaleY(0); } }
.by-visare { fill: var(--black, #121A2B); animation: by-visa 2s var(--by-mjuk) .35s backwards; }
@keyframes by-visa { from { transform: translateY(0); } }
.by-skala { stroke: var(--linje, #d5d5d3); stroke-width: 2; }
.by-streck { stroke: var(--black, #121A2B); stroke-width: 2.5; stroke-linecap: round; }
.by-strecktext { font: 600 22px var(--sans, sans-serif); fill: var(--dampad, #6b6e76); }
/* The beam on the crane's line: a very slow, small sway (the only thing that keeps moving, like the garden's leaves). */
.by-lina-grupp { transform-box: view-box; transform-origin: 66px -4px; animation: by-gunga 7s ease-in-out infinite alternate; }
@keyframes by-gunga { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }

/* The tower crane: the load swings once and is lowered a little while questions wait. */
.by-kran-bild { display: block; width: 100%; height: auto; overflow: visible; }
.by-pendel { transform-box: view-box; transform-origin: 134px 30px; }
.by-kran-bild.haller .by-pendel { animation: by-sving 2.8s ease-in-out .5s both; }
.by-kran-bild.haller .by-krok-grupp { transform: translateY(9px); animation: by-sank 1.8s var(--by-mjuk) 1.1s backwards; }
@keyframes by-sving { 0% { transform: rotate(0); } 22% { transform: rotate(5deg); } 50% { transform: rotate(-3.2deg); } 76% { transform: rotate(1.2deg); } 100% { transform: rotate(0); } }
@keyframes by-sank { from { transform: translateY(0); } }

/* The pallet: the layers of bricks are set down one by one. */
.by-pall { display: block; width: 100%; height: auto; overflow: visible; }
.by-tra { fill: var(--by-tra); }
.by-tra-skugga { fill: var(--by-tra-skugga); }
.by-tra-mork { fill: var(--by-tra-mork); }
.by-tra-ljus { fill: none; stroke: var(--by-tra-ljus); stroke-width: 1.6; stroke-linecap: round; }
.by-tra-adring { fill: none; stroke: var(--by-tra-adring); stroke-width: 1.2; stroke-linecap: round; }
.by-lager { animation: by-lagg .7s var(--by-mjuk) backwards; animation-delay: calc(.6s + var(--i) * .16s); }
@keyframes by-lagg { from { transform: translateY(-16px); opacity: 0; } 40% { opacity: 1; } }

/* A track: the walls are built from the ground up, then the truss or the roof is set on, the cone comes out last. */
.by-tomt { display: block; width: 100%; height: auto; overflow: visible; }
.by-grus { fill: var(--by-grus); }
.by-grus-mork { fill: var(--by-grus-mork); }
.by-grus-ljus { fill: var(--by-grus-ljus); }
.by-yta { fill: var(--by-betong-skugga); }
.by-yta-ljus { fill: none; stroke: var(--by-betong); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 3 3; }
.by-tak { fill: var(--by-tak); }
.by-tak-mork { fill: var(--by-tak-mork); }
.by-tak-ljus { fill: none; stroke: var(--by-tak-ljus); stroke-width: 1.6; stroke-linecap: round; }
.by-takstol { fill: none; stroke: var(--by-tra); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.by-takstol-skugga { fill: none; stroke: var(--by-tra-skugga); stroke-width: 1.2; stroke-linecap: round; }
.by-kon { fill: var(--by-kon); }
.by-kon-mork { fill: var(--by-kon-mork); }
.by-kon-band { fill: var(--by-kon-band); }
.by-bygg { transform-box: fill-box; transform-origin: 50% 100%; animation: by-stig .9s var(--by-mjuk) backwards; animation-delay: var(--d); }
.by-tak-grupp, .by-kon-grupp > *, .by-vecka-sten { transform-box: fill-box; transform-origin: 50% 100%; }
.by-tak-grupp { animation: by-satt .7s var(--by-fjader) backwards; animation-delay: calc(var(--d) + .7s); }
.by-kon-grupp > * { animation: by-satt .5s var(--by-mjuk) backwards; animation-delay: calc(var(--d) + 1.1s); }
@keyframes by-satt { from { transform: translateY(-10px) scale(.6); opacity: 0; } 50% { opacity: 1; } }

/* A week's brick, laid on its bed; an empty week is a pale brick with a contour a shade darker (no black). */
.by-vecka { display: block; width: 100%; height: auto; overflow: visible; }
.by-murbruk { fill: var(--by-murbruk); }
.by-vecka-sten { animation: by-lagg .6s var(--by-mjuk) backwards; animation-delay: calc(.4s + var(--i) * 80ms); }
.by-tom { fill: var(--by-blek); }
.by-tom-topp { fill: var(--by-blek-ljus); }
.by-tom-sida { fill: var(--by-blek-skugga); }
.by-tom-kontur { fill: none; stroke: var(--by-blek-linje); stroke-width: 1.3; stroke-linejoin: round; }
.by-blek-linje-fyll { fill: var(--by-blek-skugga); }

/* The small marks: the hard hat (no CSS height when placed inside another SVG) and the harvest row's bricks. */
.by-ikon { display: block; height: 100%; width: auto; overflow: visible; }
.by-sten { display: block; width: 100%; height: auto; overflow: visible; }

/* ---- The manager's views (.tema-bygget on assets/js/uppfoljning/vy.js's view) ---- */
.tema-bygget { --b-stal: #5F7389; --b-stal-ton: #E4E9EF; --b-tegel: #C26A4F; --b-varm: #FBF4EC; }
.tema-bygget .uppf-bar > span { background: var(--b-stal); }
.tema-bygget .uppf-bar.lage-efter > span, .tema-bygget .uppf-bar.lage-ej-startat > span { background: var(--b-tegel); }
.tema-bygget .ring-fyll, .tema-bygget .graf-linje { stroke: var(--b-stal); }
.tema-bygget .graf-yta { fill: var(--b-stal-ton); }
.tema-bygget .graf-prick { stroke: var(--b-stal); }
.tema-bygget .kort-ikon { background: var(--b-stal-ton); }
.tema-bygget .kpi-matare { background: var(--b-varm); }
/* The number first, at the same height in every box; the gauge follows on the right. */
.tema-bygget .kpi { align-items: flex-start; }
.tema-bygget .kpi .matare-plats { order: 2; margin-right: 24px; }
/* The house is a little wider than the carrot for its height: a wider place makes it as tall as the carrot. */
.tema-bygget .matare-plats { width: 112px; }
@media (max-width: 640px) { .tema-bygget .matare-plats { width: 90px; } }
.bygget-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 .bygget-niva { opacity: 1; }
/* Ten bricks as two courses of five, the upper course offset half a brick like a wall; the empty ones are pale. */
.tema-bygget .skord-rad { grid-template-columns: repeat(5, minmax(0, 40px)); gap: 2px 3px; max-width: 220px; align-items: end; }
.tema-bygget .skord-rad > span:nth-child(n + 6) { grid-row: 1; translate: 15px 0; }
.tema-bygget .skord-rad > span:nth-child(-n + 5) { grid-row: 2; }
.tema-bygget .skord-rad .by-sten { width: 100%; }
/* Weeks in a row as small bricks. */
.tema-bygget .svit-rad { gap: 4px; flex-wrap: wrap; }
.tema-bygget .svit-rad span { width: 12px; height: 9px; border-radius: 2px; border: 1.5px solid var(--by-blek-linje); background: var(--by-blek); }
.tema-bygget .svit-rad span.nadd { background: var(--by-tegel); border-color: var(--by-tegel-skugga); }
/* The hard hat at the tip of a bar, sitting on its end. */
.bar-bygget { position: relative; display: block; padding-right: 16px; }
.bar-bygget .bar-spets { position: absolute; top: -5px; left: max(-2px, calc(var(--v) * (100% - 16px) - 18px)); height: 20px; width: auto;
  opacity: 0; transition: opacity 300ms 900ms; }
.vuxen .bar-bygget .bar-spets { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .by-fyllning, .by-visare, .by-lina-grupp, .by-pendel, .by-krok-grupp, .by-lager, .by-bygg, .by-tak-grupp, .by-kon-grupp > *,
  .by-vecka-sten { animation: none !important; }
  .bygget-niva, .bar-bygget .bar-spets { transition: none; }
}