/* GENERATED by scripts/mosaic_marks.py — edit that, then rerun it.
   The CTM logo's nine hexagons with a bright band running over them, for loading
   and busy marks. Animated SVGs used as masks, so they cost no script, take any
   colour, and hold still under reduced motion. */

:root {
    --mosaic-loader: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='72 14 890 1012'%3E%3Cstyle%3Epath%7Bfill:none;stroke:%23000;stroke-width:29;stroke-linejoin:round%7D.t%7Bopacity:0.2;animation:l 1.8s linear infinite%7D%40keyframes l%7B0%25,100%25%7Bopacity:0.2%7D18%25%7Bopacity:1%7D55%25%7Bopacity:0.2%7D%7D.d0%7Banimation-delay:-1.80s%7D.d2%7Banimation-delay:-1.60s%7D.d1%7Banimation-delay:-1.40s%7D.d4%7Banimation-delay:-1.20s%7D.d5%7Banimation-delay:-1.00s%7D.d3%7Banimation-delay:-0.80s%7D.d6%7Banimation-delay:-0.60s%7D.d7%7Banimation-delay:-0.40s%7D.d8%7Banimation-delay:-0.20s%7D%3C/style%3E%3Cpath class='t d0' d='M414 475L308 415L308 294L414 234L520 294L520 415Z'/%3E%3Cpath class='t d1' d='M308 651L202 592L202 473L308 414L412 473L412 592Z'/%3E%3Cpath class='t d2' d='M518 652L414 592L414 473L518 413L624 473L624 592Z'/%3E%3Cpath class='t d3' d='M205 828L100 769L100 650L205 591L310 650L310 769Z'/%3E%3Cpath class='t d4' d='M414 827L310 768L310 650L414 591L518 650L518 768Z'/%3E%3Cpath class='t d5' d='M624 828L518 768L518 650L624 590L728 650L728 768Z'/%3E%3Cpath class='t d6' d='M518 997L414 939L414 824L518 766L622 824L622 939Z'/%3E%3Cpath class='t d7' d='M716 295L608 232L608 107L716 44L824 107L824 232Z'/%3E%3Cpath class='t d8' d='M824 473L718 412L718 291L824 230L932 291L932 412Z'/%3E%3C/svg%3E");
    --mosaic-busy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='72 14 890 1012'%3E%3Cstyle%3Epath%7Bfill:none;stroke:%23000;stroke-width:29;stroke-linejoin:round%7D.t%7Bopacity:0.15;animation:l 2.4s linear infinite%7D%40keyframes l%7B0%25,100%25%7Bopacity:0.15%7D18%25%7Bopacity:1%7D55%25%7Bopacity:0.15%7D%7D.d0%7Banimation-delay:-2.40s%7D.d2%7Banimation-delay:-2.13s%7D.d1%7Banimation-delay:-1.87s%7D.d4%7Banimation-delay:-1.60s%7D.d5%7Banimation-delay:-1.33s%7D.d3%7Banimation-delay:-1.07s%7D.d6%7Banimation-delay:-0.80s%7D.d7%7Banimation-delay:-0.53s%7D.d8%7Banimation-delay:-0.27s%7D%3C/style%3E%3Cpath class='t d0' d='M414 475L308 415L308 294L414 234L520 294L520 415Z'/%3E%3Cpath class='t d1' d='M308 651L202 592L202 473L308 414L412 473L412 592Z'/%3E%3Cpath class='t d2' d='M518 652L414 592L414 473L518 413L624 473L624 592Z'/%3E%3Cpath class='t d3' d='M205 828L100 769L100 650L205 591L310 650L310 769Z'/%3E%3Cpath class='t d4' d='M414 827L310 768L310 650L414 591L518 650L518 768Z'/%3E%3Cpath class='t d5' d='M624 828L518 768L518 650L624 590L728 650L728 768Z'/%3E%3Cpath class='t d6' d='M518 997L414 939L414 824L518 766L622 824L622 939Z'/%3E%3Cpath class='t d7' d='M716 295L608 232L608 107L716 44L824 107L824 232Z'/%3E%3Cpath class='t d8' d='M824 473L718 412L718 291L824 230L932 291L932 412Z'/%3E%3C/svg%3E");
    --mosaic-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='72 14 890 1012'%3E%3Cstyle%3Epath%7Bfill:none;stroke:%23000;stroke-width:29;stroke-linejoin:round%7D%3C/style%3E%3Cpath d='M414 475L308 415L308 294L414 234L520 294L520 415Z'/%3E%3Cpath d='M308 651L202 592L202 473L308 414L412 473L412 592Z'/%3E%3Cpath d='M518 652L414 592L414 473L518 413L624 473L624 592Z'/%3E%3Cpath d='M205 828L100 769L100 650L205 591L310 650L310 769Z'/%3E%3Cpath d='M414 827L310 768L310 650L414 591L518 650L518 768Z'/%3E%3Cpath d='M624 828L518 768L518 650L624 590L728 650L728 768Z'/%3E%3Cpath d='M518 997L414 939L414 824L518 766L622 824L622 939Z'/%3E%3Cpath d='M716 295L608 232L608 107L716 44L824 107L824 232Z'/%3E%3Cpath d='M824 473L718 412L718 291L824 230L932 291L932 412Z'/%3E%3C/svg%3E");
}

/* A loading mark: the brand colour through the mosaic. Replaces Bootstrap's
   spinner-border. <div class="ctm-loader" role="status"><span class="visually-hidden">…
   ctm-loader-sm is the inline size (a button, a line of text). */
.ctm-loader {
    display: inline-block;
    width: 52px;
    height: 56px;
    flex: none;
    vertical-align: middle;
    background: var(--button-color, #6f42c1);
    -webkit-mask: var(--mosaic-loader) center / contain no-repeat;
    mask: var(--mosaic-loader) center / contain no-repeat;
}

.ctm-loader-sm {
    width: 15px;
    height: 16px;
}

/* dcc.Loading's default spinner becomes the mosaic */
.dash-default-spinner {
    width: 46px !important;
    height: 50px !important;
    background: var(--button-color, #6f42c1);
    -webkit-mask: var(--mosaic-loader) center / contain no-repeat;
    mask: var(--mosaic-loader) center / contain no-repeat;
}

.dash-default-spinner > * {
    display: none !important;
}

/* The header logo while the page works (html[data-busy], set in base.html): the logo
   stays whole and the missing piece comes and goes. */
.branding-logo-link {
    position: relative;
}

.branding-mark {
    display: none;
    position: absolute;
    inset: 0;
    background: #000;
    -webkit-mask: var(--mosaic-busy) center / contain no-repeat;
    mask: var(--mosaic-busy) center / contain no-repeat;
    pointer-events: none;
}

html[data-busy] .branding-mark {
    display: block;
}

html[data-busy] .branding-logo {
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .ctm-loader,
    .dash-default-spinner {
        -webkit-mask-image: var(--mosaic-mark);
        mask-image: var(--mosaic-mark);
    }

    html[data-busy] .branding-mark {
        display: none;
    }

    html[data-busy] .branding-logo {
        visibility: visible;
    }
}