/* Lower-right route entry for the independently released group night preview.
   Personal switches its theme in place and does not load this stylesheet. */
.night-route-switcher{
    position:fixed;
    right:max(18px, env(safe-area-inset-right));
    bottom:max(18px, env(safe-area-inset-bottom));
    z-index:calc(var(--z-overlay, 900) - 1);
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:0 14px 0 10px;
    border:1px solid rgb(57 113 211 / .22);
    border-radius:999px;
    background:rgb(255 255 255 / .94);
    box-shadow:0 12px 30px rgb(27 45 76 / .18),0 1px 3px rgb(27 45 76 / .08);
    color:#2e5ebc;
    font-family:inherit;
    font-size:13px;
    font-weight:700;
    line-height:1;
    text-decoration:none;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease;
}
.night-route-switcher:hover,
.night-route-switcher:focus-visible{
    border-color:rgb(57 113 211 / .5);
    background:#fff;
    box-shadow:0 16px 34px rgb(27 45 76 / .22),0 0 0 4px rgb(57 113 211 / .12);
    color:#244d9a;
    outline:none;
    transform:translateY(-1px);
}
.night-route-switcher:active{
    transform:translateY(0);
}
.night-route-switcher.is-group-route{
    border-color:rgb(17 122 101 / .24);
    box-shadow:0 12px 30px rgb(15 65 52 / .16),0 1px 3px rgb(15 65 52 / .08);
    color:#0d6655;
}
.night-route-switcher.is-group-route:hover,
.night-route-switcher.is-group-route:focus-visible{
    border-color:rgb(17 122 101 / .5);
    box-shadow:0 16px 34px rgb(15 65 52 / .2),0 0 0 4px rgb(17 122 101 / .11);
    color:#094f42;
}
.night-route-switcher-icon{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    flex:0 0 28px;
    border-radius:50%;
    background:rgb(57 113 211 / .11);
}
.night-route-switcher.is-group-route .night-route-switcher-icon{
    background:rgb(17 122 101 / .11);
}
.night-route-switcher-icon svg{
    width:16px;
    height:16px;
}
.night-route-switcher-label{
    white-space:nowrap;
}
html.web-night-preview .night-route-switcher,
html[data-night-route="night"] .night-route-switcher{
    border-color:rgb(137 174 255 / .26);
    background:rgb(16 27 47 / .92);
    box-shadow:0 14px 34px rgb(0 0 0 / .32),0 1px 2px rgb(0 0 0 / .3);
    color:#dbe8ff;
}
html.web-night-preview .night-route-switcher:hover,
html.web-night-preview .night-route-switcher:focus-visible,
html[data-night-route="night"] .night-route-switcher:hover,
html[data-night-route="night"] .night-route-switcher:focus-visible{
    border-color:rgb(151 184 255 / .62);
    background:#17263d;
    box-shadow:0 18px 40px rgb(0 0 0 / .38),0 0 0 4px rgb(122 167 255 / .16);
    color:#fff;
}
html.web-night-preview .night-route-switcher-icon,
html[data-night-route="night"] .night-route-switcher-icon{
    background:rgb(122 167 255 / .18);
    color:#a9c7ff;
}
html.web-night-preview .night-route-switcher.is-group-route,
html[data-night-route="night"] .night-route-switcher.is-group-route{
    border-color:rgb(116 222 190 / .3);
    background:rgb(16 41 35 / .94);
    color:#d4fff1;
}
html.web-night-preview .night-route-switcher.is-group-route:hover,
html.web-night-preview .night-route-switcher.is-group-route:focus-visible,
html[data-night-route="night"] .night-route-switcher.is-group-route:hover,
html[data-night-route="night"] .night-route-switcher.is-group-route:focus-visible{
    border-color:rgb(139 234 206 / .64);
    background:#174239;
    box-shadow:0 18px 40px rgb(0 0 0 / .38),0 0 0 4px rgb(88 202 174 / .16);
    color:#fff;
}
html.web-night-preview .night-route-switcher.is-group-route .night-route-switcher-icon,
html[data-night-route="night"] .night-route-switcher.is-group-route .night-route-switcher-icon{
    background:rgb(88 202 174 / .19);
    color:#aaf1dc;
}
@media (max-width:560px){
    .night-route-switcher{
        right:max(12px, env(safe-area-inset-right));
        bottom:max(12px, env(safe-area-inset-bottom));
        min-height:42px;
        padding-right:12px;
        font-size:12px;
    }
    .night-route-switcher-icon{
        width:27px;
        height:27px;
        flex-basis:27px;
    }
}
@media (prefers-reduced-motion:reduce){
    .night-route-switcher{transition:none;}
}
@media print{
    .night-route-switcher{display:none!important;}
}
