@charset "UTF-8";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --delicate-grey: #748194;
    --lime: #6dc082;
    --lime-darker: #60ae74;
    
    --grey: #eee;
    --grey-darker: #e7eaf4;
    --grape: #a84ec3;
    --grape-darker: #782c8f;
    --indigo: #428bca;
}

.hidden {
    display: none !important;
}

.alert {
    position: absolute;
    top: 15px;
    right: 35px;
    color: var(--indigo);
    font-weight: bold;
    max-width: 50%;
    text-align: right;
}

.alert.warning {
    color: crimson;
}

.link {
    display: none;
}

body {
    font-family: 'Rubik', sans-serif;
    min-height: 100vh;
    padding: 12px;
    font-size: 18px;
    background: var(--grey);
    color: #222;
}

body, form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

form {
    position: sticky;
    width: 532px;
    max-width: 100vw;
    row-gap: 14px;
    background: white;
    padding: 15px 35px 45px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

form#horde, form#settings, form#signup {
    display: none;
}

#settings label {
    display: flex;
    width: 100%;
    align-items: center;
    column-gap: 8px;
    text-wrap: nowrap;
}

.switcher {
    box-shadow: inset 2px 2px 1px var(--grey), inset -1px -1px 1px var(--grey-darker);
    transition: box-shadow .5s ease;
    border: 1px solid var(--grey);
}

.switcher::before {
    display: inline-flex;
    content: "";
    width: 100%;
    height: 100%;
    background: var(--delicate-grey);
    --svg: url(
        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='512' height='512' x='0' y='0' viewBox='0 0 417.065 417.065'%3E%3Cg%3E%3Cpath d='M401.56 47.087c-17.452-14.176-42.561-12.128-56.095 4.536L167.042 271.598 73.913 150.58c-13.892-18.037-39.781-21.411-57.819-7.535-18.054 13.884-21.427 39.781-7.535 57.843L133.56 363.321c13.892 18.037 39.789 21.419 57.835 7.535 5.145-3.959 8.95-8.958 11.648-14.42l205.645-253.514c13.527-16.688 10.332-41.675-7.128-55.835z' le=''%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask: var(--svg);
    -webkit-mask-size: 60%;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask: var(--svg);
    mask-size: 65%;
    mask-position: center;
    mask-repeat: no-repeat;
    transition: background, opacity .5s ease;
    opacity: 0.4;
}

#settings input[type="checkbox"]:checked + label .switcher::before {
    background: var(--lime);
    opacity: 1;
}

#settings button {
    background: inherit;
    margin: 0;
    width: 28px;
    height: 28px;
}

#settings {
    width: 368px;
}

.tooltip {
    position: sticky;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    width: 200px;
    bottom: calc(100% + 6px);
    text-wrap: wrap;
    z-index: 25;
    font-size: 14px;
    padding: 8px 12px;
    line-height: 140%;
    background: #25325e;
    color: var(--grey);
    box-shadow: 2px 1px 5px 2px black;
    opacity: 0;
    visibility: hidden;
}

#settings .category, .mobile-tooltip {
    cursor: help;
}

button.mobile-tooltip {
    display: none;
}

.category {
    font-style: initial;
}

.schedule {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 12px;
}

.icon {
    width: 28px;
    height: 28px;
}

#settings label span.time {
    color: var(--grape);
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
}

input[type="text"].time {
    border-radius: 18px;
    width: 80px;
    text-align: center;
    letter-spacing: 2px;
}

input[type="text"].time::placeholder {
    text-align: center;
    margin: 0;
}

input[type="text"].time:valid {
    border-color: var(--grape);
}

input[type="text"].time:invalid {
    font-weight: bold;
    color: tomato;
    border-color: tomato;
}

h1 {
    font-size: 155%;
    width: 100%;
    padding: 8px 0 12px 0;
}

.groups {
    padding: 8px;
}

.groups legend {
    display: flex;
    flex-direction: row;
    column-gap: 8px;
}

.group {
    width: 100%;
    display: flex;
    flex-direction: row;
    column-gap: 16px;
}

.groups button {
    background: transparent !important;
    width: 20px;
    height: 20px;
    margin: 0;
}

.groups button svg {
    fill: var(--grape);
    transition: fill, transform .3s ease-in-out;
}

.groups button svg:hover {
    fill: var(--grape-darker);
    transform: scale(1.1);
}

.group label{
    width: calc(100% - 108px);
    display: flex;
    flex-direction: row;
    column-gap: 8px;
    align-items: center;
    text-align: justify;
}

.group label::after {
    display: flex;
    align-self: baseline;
    content: attr(data-zone);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--grape);
}

section {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 8px 0;
    column-gap: 12px;
    row-gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

input[type="file"], input[type="checkbox"] {
    display:none;
}

.images label {
    width: calc(50% - 6px);
    min-width: 200px;
}

.images img {
    width: 100%;
    cursor: pointer;
    aspect-ratio: 1.3;
    box-shadow: 2px 2px 3px 1px #00000070, -4px -4px 5px 1px #00000047;
}

figure {
    position: sticky;
}

figcaption {
    font-size: 85%;
    margin-top: 6px;
    text-align: center;
    font-style: italic;
    color: var(--delicate-grey);
}

fieldset {
    width: 100%;
    border-color: var(--delicate-grey);
}

legend {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    font-size: 14px;
    row-gap: 2px;
    margin-left: 8px;
}

span {
    color: var(--delicate-grey);
    font-style: italic;
}

input {
    font-size: inherit;
}

button, input[type="submit"] {
    width: 100%;
    border: none;
    color: white;
    cursor: pointer;
    line-height: 2.4;
    letter-spacing: 2px;
}

button {
    margin-top: 16px;
    background: var(--lime);
}

button:hover {
    background: var(--lime-darker);
}

input[type="submit"] {
    margin-top: 12px;
    background: var(--indigo);
}

input[type="submit"]:hover {
    background: #397bb5;
}

input[type="text"], [role="textbox"] {
    width: 100%;
    padding: 0 6px;
    line-height: 2;
    font-size: inherit;
    border: 2px solid var(--delicate-grey);
}

input[type="text"]::placeholder, [role="textbox"]:empty::before {
    color: var(--delicate-grey);
    text-align: right;
    margin-right: 40px;
}

[role="textbox"]:empty::before {
    display: block;
    content: attr(aria-placeholder);
    float: right;
}

[role="label"] {
    width: 100%;
    display: flex;
    flex-direction: column;
}

[role="label"] .instruction {
    font-weight: bold;
}

[role="label"] .warning {
    display: none;
}

.invalid[role="textbox"]::after {
    content: attr(maxlength);
    font-size: 14px;
    letter-spacing: 2px;
    margin: 3px;
    float: right;
    background: crimson;
    color: var(--grey);
    padding: 0 3px;
    border-radius: 6px;
}

section.form-buttons {
    justify-content: space-evenly;
}

section.form-buttons input[type="radio"] {
    display: none;
}

section.form-buttons label {
    color: var(--delicate-grey);
    cursor: pointer;
}

section.form-buttons input[type="radio"]:checked + label {
    color: inherit;
}

input[type="radio"] + label::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

input[type="radio"]:checked + label::before {
    background-image: url("data:image/svg+xml,%3Csvg fill='%236dc082' height='200px' width='200px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' xml:space='preserve' stroke='%236dc082'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cg%3E%3Cg%3E%3Cpath d='M492.867,181.444l-149.825-21.785L276.014,23.861c-8.187-16.59-31.844-16.589-40.031,0l-67.026,135.799L19.133,181.445 c-18.306,2.662-25.615,25.158-12.369,38.071l108.408,105.682L89.592,474.44c-3.125,18.232,16.012,32.136,32.386,23.528 l132.475-70.452l134.025,70.451c17.914,8.607,37.051-5.296,33.926-23.528l-25.578-149.241l108.409-105.685 C518.482,206.601,511.173,184.105,492.867,181.444z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/******** Preloader ******/
.preloader {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 14px;
    row-gap: 24px;
}

.preloader.fullscreen {
    color: var(--lime);
    text-shadow: 3px 3px 3px black;
}

.preloader .caption {
    display: flex;
    flex-direction: column;
    row-gap: 6px;
    text-align: center;
}

.preloader .grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 16px;
    align-items: center;
    justify-content: center;
    width: 160px;
}

.preloader .grid div {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--lime);
    animation: preloader-grid 1.2s linear infinite;
    animation-delay: var(--delay);
}

#help-link {
    color: var(--indigo);
    font-size: 15px;
    margin-top: 12px;
}

/***** Меню навигации *****/
nav, .preloader.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
}

nav.expanded, .preloader.fullscreen {
    width: 100%;
    height: 100%;
    z-index: 1000;
    backdrop-filter: brightness(0.25) blur(3px);
    animation: fade-out .5s 1 forwards ease;
}

#show-nav-wheel {
    width: 32px;
    height: 32px;
    margin: 12px;
    background: none;
}

nav.expanded #show-nav-wheel {
    display: none;
}

#show-nav-wheel svg {
    fill: var(--grape-darker);
}

.wheel {
    position: fixed;
    display: none;
    width: 500px;
    height: 500px;
    top: calc(50vh);
    left: calc(50vw);
    transform: translate(-50%, -50%);
    transform-origin: 0% 0%;
}

nav.expanded .wheel {
    display: block;
}

nav.expanded .wheel .arc {
    opacity: 0.8;
    transform: scale(1) rotate(var(--rotation)) !important;
    transition-timing-function: cubic-bezier(0, 0.5, 0.5, 1.5);
}

.wheel .arc {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 50%;
    transform-origin: 0% 100%;
    background-image: radial-gradient(circle at 0% 100%, transparent, transparent 29.5%, #38814c 30%, #38814c 30.5%, #2c6b3d 31%, #2c6b3d 50%, #38814c 50.25%, #38814c 51.5%, transparent 51.75%, transparent);
    transition-property: transform, opacity;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, -0.4, 0.7, -0.3);
    -webkit-clip-path: polygon(0 0, 0 98%, 98% 38%);
    clip-path: polygon(0 0, 0 98%, 98% 38%);
    opacity: 0;
    transform: scale(0) rotate(var(--rotation));
    list-style-type: none;
    cursor: pointer;
}

nav.expanded .wheel .arc:hover {
    opacity: 1;
    transform: scale(1.1) rotate(var(--rotation)) !important;
    filter: brightness(150%);
}

.wheel .arc:hover svg.menu-icon {
    fill: azure;
}

.wheel .arc svg.menu-icon {
    position: absolute;
    top: 44%;
    left: 22%;
    width: 32px;
    transform: rotate(calc(var(--rotation) * -1));
    transition: color 0.3s;
    fill: #222222;
}

.wheel .arc:nth-child(1) {
    --rotation: -120deg;
    transition-delay: 0.015s;
}

.wheel .arc:nth-child(2) {
    --rotation: -60deg;
    transition-delay: 0s;
}

.wheel .arc:nth-child(3) {
    --rotation: 0deg;
    transition-delay: 0.015s;
}

.wheel .arc:nth-child(4) {
    --rotation: 60deg;
    transition-delay: 0s;
}

/***** Media *****/
@media screen and (max-width: 640px) {
    #settings label span.time {
        display: none;
    }
    
    button.mobile-tooltip {
        position: absolute;
        right: 0;
        display: flex;
        border-radius: 50%;
        padding: 4px;
    }

    button.mobile-tooltip::before {
        content: "";
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' x='0' y='0' viewBox='0 0 100 100'%3E%3Cg%3E%3Cpath fill='%239c27b0' d='M41.505 64.57c0-5.233.591-9.363 1.775-12.392 1.182-3.029 3.099-5.654 5.752-7.877 2.652-2.222 4.668-4.256 6.049-6.102 1.379-1.846 2.069-3.879 2.069-6.102 0-5.411-2.329-8.118-6.988-8.118-2.151 0-3.89.789-5.216 2.366-1.327 1.578-2.025 3.71-2.096 6.398H24.677c.072-7.168 2.331-12.75 6.775-16.748C35.896 11.998 42.132 10 50.162 10c7.992 0 14.183 1.847 18.575 5.538 4.389 3.692 6.586 8.943 6.586 15.753 0 2.976-.592 5.681-1.775 8.118-1.183 2.438-3.083 4.929-5.699 7.473l-6.183 5.753c-1.756 1.685-2.975 3.414-3.656 5.188-.68 1.775-1.057 4.024-1.128 6.748H41.505zm-2.204 16.344c0-2.652.959-4.83 2.877-6.533 1.916-1.702 4.309-2.553 7.177-2.553 2.867 0 5.26.852 7.177 2.553 1.917 1.703 2.877 3.881 2.877 6.533 0 2.653-.96 4.83-2.877 6.533C54.615 89.149 52.222 90 49.355 90c-2.868 0-5.261-.851-7.177-2.553-1.919-1.703-2.877-3.88-2.877-6.533z' class=''%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .tooltip.visible::after {
        animation: fade-out 1s 1s 1 forwards ease;
        visibility: visible;
    }

    #show-nav-wheel {
        width: 24px;
        height: 24px;
        margin: 8px 8px;
    }

    .wheel {
        width: 368px;
        height: 368px;
    }

    .wheel .arc svg.menu-icon {
        width: 28px;
        top: 44%;
        left: 19%;
    }

    .groups button {
        width: 16px;
        height: 16px;
    }
    
    .group label {
        width: calc(100% - 96px);
        font-size: 14px;
    }

    .group label::after {
        font-size: 10px;
    }

    .alert {
        max-width: 240px;
        font-size: 85%;
    }
}

@media screen and (max-width: 420px) {
    form {
        min-height: 100vh;
        width: 100vw !important;
    }

    body {
        font-size: 16px;
        padding: 0;
    }
}

@media screen and (min-width: 640px) {
    .tooltip:hover::after {
        animation: fade-out 1s 1s 1 forwards ease;
        visibility: visible;
    }
}

/***** Анимации *****/
@keyframes preloader-grid {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes fade-out {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}