/*

Copyright © 2024 Voto inc.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), 
to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, 
and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, 
WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

*/

/*
   ____   U  ___ u  __  __    __  __    U  ___ u  _   _          _   _     U  ___ u       ____     U  ___ u   U  ___ u _____   ____     _____    ____        _       ____                     
U /"___|   \/"_ \/U|' \/ '|uU|' \/ '|u   \/"_ \/ | \ |"|        | \ |"|     \/"_ \/    U | __")u    \/"_ \/    \/"_ \/|_ " _| / __"| u |_ " _|U |  _"\ u U  /"\  u U|  _"\ u     __        __ 
\| | u     | | | |\| |\/| |/\| |\/| |/   | | | |<|  \| |>      <|  \| |>    | | | |     \|  _ \/    | | | |    | | | |  | |  <\___ \/    | |   \| |_) |/  \/ _ \/  \| |_) |/     \"\      /"/ 
 | |/__.-,_| |_| | | |  | |  | |  | |.-,_| |_| |U| |\  |u      U| |\  |u.-,_| |_| |      | |_) |.-,_| |_| |.-,_| |_| | /| |\  u___) |   /| |\   |  _ <    / ___ \   |  __/       /\ \ /\ / /\ 
  \____|\_)-\___/  |_|  |_|  |_|  |_| \_)-\___/  |_| \_|        |_| \_|  \_)-\___/       |____/  \_)-\___/  \_)-\___/ u |_|U  |____/>> u |_|U   |_| \_\  /_/   \_\  |_|         U  \ V  V /  U
 _// \\      \\   <<,-,,-.  <<,-,,-.       \\    ||   \\,-.     ||   \\,-.    \\        _|| \\_       \\         \\   _// \\_  )(  (__)_// \\_  //   \\_  \\    >>  ||>>_       .-,_\ /\ /_,-.
(__)(__)    (__)   (./  \.)  (./  \.)     (__)   (_")  (_/      (_")  (_/    (__)      (__) (__)     (__)       (__) (__) (__)(__)    (__) (__)(__)  (__)(__)  (__)(__)__)       \_)-'  '-(_/ 

*/

/* All my homies love Yantramanav */
@import url('https://fonts.googleapis.com/css2?family=Yantramanav:wght@100;300;400;500;700;900&display=swap');



/* -------------------------- */
/* GLOBAL STYES AND CONSTANTS */
/* -------------------------- */

* {
    box-sizing: border-box;
    margin: 0;
    min-width: 0;
    color: var(--color-text);
    transition: none .3s;
    transition-property: var(--color-transition-properties);
    font-family: 'Yantramanav', sans-serif;
    scrollbar-color:var(--color-text) var(--color-background);
}
html {
    overflow-x: hidden;
}
:root {
    /* colors */
    --color-border: #200049;
    --color-accent: #7C2EE1;
    --color-background: #ffffff;
    --color-background-secondary: #ffffff;
    --color-background-translucent: #ffffff88;
    --color-text: #200049;
    --color-text-translucent: #20004988;
    --color-shadow: #20004988;
    --color-text-inverse: #ffffff;
    --color-error: #ff5050;
    
    /* other constants */
    --border-radius: 20px;
    --border-width: 3px;
    --border: var(--border-width) solid var(--color-border);
    --shadow: 0 0 15px var(--color-shadow);
    --shadow-none: 0 0 15px transparent;
    --padding-large: 2rem;
    --padding-small: 1rem;
    --color-transition-properties: color, background-color, border-color, filter, scrollbar-color, opacity;
}

/* DARK MODE RAAAH! */
@media (prefers-color-scheme: dark) {
    :root {
        --color-border: #EFDBFF;
        --color-accent: #7C2EE1;
        --color-background: #252525;
        --color-shadow: #00000088;
        --color-background-secondary: #303030;
        --color-background-translucent: #25252588;
        --color-text: #EFDBFF;
        --color-text-translucent: #EFDBFF88;
        --color-text-inverse: #ffffff;
        --color-error: #ff9090;
    }
    img.icon {
        filter: invert(92%) sepia(18%) saturate(7494%) hue-rotate(194deg) brightness(122%) contrast(100%) !important;
    }
}

body {
    background-color: var(--color-background);
}

main {
    padding: var(--padding-large);
    display: flex;
    flex-direction: column;
    gap: var(--padding-large);
    align-items: start;
}

main header {
    display: flex;
    flex-direction: column;
    gap: var(--padding-small);
    align-items: start;
}

main header .row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}


/* ---- */
/* LNKS */
/* ---- */

a {
    font-weight: bold;
    color: var(--color-text);
    transition-property: var(--color-transition-properties), filter;
}

a:not(.card, .no-effect):hover {
    filter: brightness(3);
}

nav a {
    text-decoration: none;
}



/* ------- */
/* BUTTONS */
/* ------- */

/* regular button */
button:not(.reset) {
    padding: .5em 1em;
    border: var(--border);
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
    border-radius: var(--border-radius);
    cursor: pointer;
    box-shadow: var(--shadow);
    transition-timing-function: cubic-bezier(0, 0, 0, 1);
    transition-property: var(--color-transition-properties), scale, rotate, padding, box-shadow, border-width, outline-offset, outline-color;
}

button:disabled {
    filter: saturate(0);
    box-shadow: var(--shadow-none);
    opacity: .5;
    pointer-events: none;
}

button:not(.reset):hover:not(:disabled) {
    scale: 1.1;
}

button:not(.reset):active:not(:disabled) {
    scale: 1.05;
}

/* subtle button */
button.subtle {
    border: none;
    background: none;
    text-align: center;
    cursor: pointer;
    padding: .25em 0;
    font-size: 1rem;
}
button.subtle:hover {
    background-color: var(--color-text-translucent) !important;
}
button.subtle:active {
    filter: brightness(.8);
}
button.subtle.active {
    pointer-events: none;
    background-color: var(--color-text-translucent);
    cursor: default;
}

/* fun button!!!!!!!!!!!!!!!! */
button.fun {
    transition-timing-function: cubic-bezier(0, 0, 0, 1.5);
    transition-duration: 2s;
    outline: 1px solid transparent;
    outline-offset: 0;
}

button.fun:not(:hover) {
    outline-color: transparent !important;
}

button.fun:not(:disabled) {
    scale: 1.05;
}

button.fun:disabled {
    border-width: 1px;
}

button.fun:hover:not(:disabled) {
    animation: fun 1s ease-out infinite;
    scale: 1.15;
    outline-color: var(--color-text);
}

button.fun:active:not(:disabled) {
    scale: 1;
    animation-duration: .5s;
}

@keyframes fun {
    from {
        outline-offset: 0;
        outline-color: var(--color-text);
    }
    to {
        outline-offset: .5em;
        outline-color: transparent;
    }
}



/* ---------- */
/* NAVIGATION */
/* ---------- */

nav {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 3;
    align-items: center;
    flex-shrink: 1;
    padding: var(--padding-small) var(--padding-large);
    display: flex;
    background-color: var(--color-background-secondary);
    box-shadow: var(--shadow);
    justify-content: space-between;
}

.desktop-nav, .mobile-nav {
    width: fit-content;
    
    display:flex;
    line-height: normal;
}

.desktop-nav {
    display:flex;
    gap: var(--padding-large);
}

.mobile-nav {
    display: none;
    gap: var(--padding-small);
}

nav .user {
    display: inline-flex;
    align-items: center;
    gap: 1ch;
}



/* ----- */
/* CARDS */
/* ----- */

.card-container {
    display: flex;
    width: 100%;
}

.card-container:not(.list) {
    flex-wrap: wrap;
    justify-content: center;
    /* padding: var(--padding-large); */
    gap: var(--padding-large);
}

.card-container.list {
    flex-direction: column;
    gap: var(--padding-small);
}

.card {
    display: flex;
    overflow: visible;
    background-color: var(--color-background);
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);
    cursor: pointer;
    text-decoration: none;
    transform: translateZ(0);
    transition-property: var(--color-transition-properties), scale;
}

.card-container:not(.list) > .card {
    flex-direction: column;
    height: 16em;
    width: min(45ch, 100%);
}

.card-container.list > .card {
    height: 4em;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    align-items: center;
    padding-right: var(--padding-small);
}

.card-container:not(.list) > .card .delete-form {
    position: absolute;
    top: 0;
    right: 0;
    margin: var(--padding-small);
    border-radius: calc(var(--border-radius) / 2);
    aspect-ratio: 1 / 1;
    box-shadow: var(--shadow);
    background-color: var(--color-background-translucent) !important;
    width: 2.5em;
    backdrop-filter: blur(3px);
}

.delete-form:hover {
    filter: brightness(3);
}

.list > .card .delete-form {
    order: 5;
    border-radius: calc(var(--border-radius) / 2);
    aspect-ratio: 1 / 1;
    box-shadow: var(--shadow);
    background-color: var(--color-background-translucent) !important;
    width: 2.5em;
}

.card:hover:not(:has(button:hover, dialog:hover)) {
    scale: 1.03;
}

.card:active:not(:has(button:hover)) {
    scale: 1;
}

.card-container:not(.list) .card h2 {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}
.list .card h2 {
    text-overflow: ellipsis;
    overflow: hidden;
}

.card-container:not(.list) .card > img {
    flex-grow: 1;
    min-height: 0;
    object-fit: cover;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    background: conic-gradient(red, purple, blue);
}

.list > .card > img {
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    background: conic-gradient(red, purple, blue);
}

.card > div {
    padding: var(--padding-small);
}
.list > .card > div {
    padding: var(--padding-small);
    display: flex;
    align-items: baseline;
    flex-grow: 1;
    gap: var(--padding-small);
}

.card > div > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list > .card > div > div {
    flex-grow: 1;
}

.card > div > div *:not(button) {
    color: var(--color-text-translucent);
}



/* ------------------- */
/* FORMS AND QUESTIONS */
/* ------------------- */

form {
    display: flex;
    align-items: center;
    flex-direction: column;
    align-self: center;
}

.question {
    border: var(--border);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    padding: var(--padding-large);
    gap: var(--padding-small);
    width: min(100%, 75ch);
}

.question .content {
    display: flex;
    flex-direction: column;
    /* align-items: start; */
    gap: var(--padding-small);
}

.question.error {
    border-color: var(--color-error);
}

.question.unanswered {
    border-color: var(--color-text-translucent);
}

.error-message {
    color: var(--color-error);
}

.form-title {
    padding: var(--padding-small);
    border: var(--border);
    border-radius: var(--border-radius);
}

/* line that conencts questions together */
.connector {
    width: 0;
    height: 3em;
    border: var(--border);
    border-width: calc(var(--border-width) / 2);
    transition-delay: .15s;
    opacity: .5;
}

:not(.unanswered) + .connector {
    opacity: 1;
}

/* -------------- */
/* FORMS CREATION */
/* -------------- */

/* line that conencts panels */
.h-connector {
    width: 1em;
    height: 0;
    border: var(--border);
    border-width: calc(var(--border-width) / 2);
    flex-shrink: 0;
}
.side-panel-container {
    display: flex;
    align-items: center;
}
.editable-question {
    display: grid;
    grid-template-columns: calc(7em + 6px) 1fr calc(7em + 6px);
    align-items: start;
    width: 100%;
}


.editable-question .question {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.editable-question .question button.subtle, .questionsOptions button.subtle {
    aspect-ratio: 1 / 1;
    width: 3rem;
}

.l-panel {
    border: var(--border);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    display: flex;
    flex-direction: column;
    /* gap: var(--padding-small); */
    align-items: center;
    width: 8em;
    /*overflow: hidden;*/
}

.l-panel .arrows * {
    flex-grow: 1;
}
.l-panel .arrows {
    border-radius: 0 0 0 calc(var(--border-radius) - 3px);
}
.l-panel .delete {
    border-radius: calc(var(--border-radius) - 3px) 0 0 0;
}
.l-panel > button, .l-panel .arrows {
    width: 100%;
}
.l-panel .arrows .up {
    border-radius: 0 0 0 calc(var(--border-radius) - 3px);
}
}
.l-panel > button {
    height: 2em;
}

.r-panel {
    border: var(--border);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    display: flex;
    flex-direction: row;
    /*padding: var(--padding-small);*/
    /*gap: var(--padding-small);*/
    width: fit-content;
    flex-wrap: wrap;
    align-items: start;
    /*overflow: hidden;*/
    flex-grow: 1;
}

.questionsAnswers > span {
    width: 100%;
    display: flex;
}

.r-panel > * {
    aspect-ratio: 1 / 1;
    width: 3rem;
}
.r-panel .checkbox {
    border-radius: 0 calc(var(--border-radius) - 3px) 0 0;
}

.qnum {
    font-size: 3em;
}

.arrows {
    display: flex;
}

i {
    width: fit-content;
}

.questionsOptions {
    display: flex;
    flex-direction: column;
    gap: var(--padding-small);
}

.questionsOptions span {
    display: flex;
    gap: 1ch;
    position: relative;
    align-items: center;
}


/* ------ */
/* INPUTS */
/* ------ */

input, textarea, select {
    /* border-radius: var(--border-radius); */
    border: none;
    border-bottom: var(--border);
    border-color: var(--color-text-translucent);
    color: var(--color-text);
    background-color: var(--color-background-secondary);
    padding: .5em .5em;
    font-size: inherit;
    overflow: hidden;
    width: 100%;
    overflow: auto;
}

textarea {
    resize: vertical;
    padding: 1.5ch .5em;
    border-left: var(--border);
    border-bottom: var(--border);
    border-color: var(--color-text-translucent);
    min-height: 1em;
}

:is(input, textarea):focus {
    border-color: var(--color-accent);
    outline: none;
}
:is(input, textarea):disabled {
    opacity: 0.5;
    pointer-events: none;
}



/* ----------------------------------- */
/* CUSTOM RADIO BUTTONS AND CHECKBOXES */
/* ----------------------------------- */

/* common */
span:has(input:is([type="radio"], [type="checkbox"])) {
    display: flex;
    gap: 1ch;
    position: relative;
    align-items: center;
}

input:is([type="radio"], [type="checkbox"]) {
    opacity: 0;
    width: 1.5em;
    aspect-ratio: 1;
    cursor: pointer;
}

.visual::before {
    content: '';
    width: calc(100% - ( var(--border-width) * 2 ) );
    aspect-ratio: 1;
    position: absolute;
    /* margin-top: .25em; */
    display: inline-block;
    pointer-events: none;
    transition: inherit;
    border: var(--border);
    outline: 2px solid transparent;
    outline-offset: 0;
    transition-property: var(--color-transition-properties), outline, outline-offset;
}

.visual:has(:checked)::before {
    background-color: var(--color-border);
}

.visual:has(:disabled)::before {
    filter: brightness(0.5);
}

.visual:has(:hover:not(:disabled))::before {
    filter: brightness(3);
    outline-color: var(--color-border);
    outline-offset: calc( var(--border-width) * -2.5 );
}

.visual:has(:hover:checked:not(:disabled))::before {
    filter: brightness(3);
    outline-offset: var(--border-width);
}

.visual:has(:hover:active:not(:disabled))::before {
    filter: brightness(3);
    outline-color: var(--color-border);
    outline-offset: calc( var(--border-width) * -3 );
}

.visual:has(:hover:active:checked:not(:disabled))::before {
    filter: brightness(3);
    outline-offset: calc( var(--border-width) * 1.5 );
}

/* radio only */
.visual:has(input[type="radio"])::before {
    border-radius: 999999em;
}

/* --------------------- */
/* DIALOGUESS AND MODALS */
/* --------------------- */

dialog {
    isolation: isolate;
    border: var(--border);
    margin: auto;
    /*pointer-events: none;*/
    background-color: var(--color-background);
    padding: var(--padding-large);
    border-radius: var(--border-radius);
    flex-direction: column;
    gap: var(--padding-large);
    /*align-items: center;*/
}
dialog .settings {
    /*pointer-events: none;*/
    display: flex;
    flex-direction: column;
    gap: var(--padding-small);
}
dialog .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--padding-small);
}
dialog .questionsOptions {
    /*border-radius: var(--border-radius);*/
    padding: var(--padding-small);
    border-left: var(--border);
}
dialog[open] {
    display: flex;
    cursor: default;
    
}
dialog * {
    /*pointer-events: all;*/
}
dialog::backdrop {
    background-color: #000000aa;
}

.modal-container {
    pointer-events: none;
    width: 100dvw;
    height: 100dvh;
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
}

.modal-container.open {
    pointer-events: all;
    backgdrop-filter: brightness(0.5);
}

.modal-container > * {
    
}

/* --------- */
/* ENTER PIN */
/* --------- */

.enter-pin {
    display: flex;
    position: sticky;
    bottom: var(--padding-large);
    z-index: 2;
    left: 50dvw;
    translate: -50% 0;
}
.enter-pin button {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding-right: var(--padding-small);
}
.enter-pin input {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    padding-left: var(--padding-small);
    box-shadow: var(--shadow);
    max-width: 20ch;
}

/* -------- */
/* TOOLTIPS */
/* -------- */

[tooltip] {
    transform: translateZ(0);
}

[tooltip]::before {
    content: attr(tooltip);
    position: absolute;
    z-index: 3;
    border: var(--border);
    padding: var(--padding-small);
    border-radius: var(--border-radius);
    background-color: var(--color-background);
    box-shadow: var(--shadow);
    opacity: 0;
    transition: none .3s cubic-bezier(0, 0, 0, 1);
    left: 50%;
    top: 0;
    width: max-content;
    translate: -50% -50%;
    transition-property: opacity, translate;
    pointer-events: none;
    
}
[tooltip]:hover::before {
    transition-delay: 1s;
    translate: -50% calc(-100% - 5px);
    opacity: 1;
}


/* ------------- */
/* MISCELLANEOUS */
/* ------------- */

.login-form {
    gap: var(--padding-large);
    width: fit-content;
    padding: var(--padding-large);
    background-color: var(--color-background);
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);
    margin: 0 auto;
    align-items: start;
}

hr {
    display: none;
    border: 1px solid #0000001a;
}

.hidden {
    display: none;
}

header, .editor-header > * {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}
.editor-header {
    flex-direction: column;
    gap: var(--padding-small);
}

img.icon {
    filter: invert(9%) sepia(33%) saturate(6701%) hue-rotate(262deg) brightness(90%) contrast(121%);
    height: 1lh;
    vertical-align: text-bottom;
}

.logo, .logo img{
    height: 1.5em;
}

p {
    max-width: 75ch;
}

.light {
    color: var(--color-text-translucent)
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 1em;
}

span.vert {
    display: flex;
    flex-direction: column;
}

#qrcode {
    width: 100%;
    /*height: 20rem;*/
    aspect-ratio: 1 / 1;
}
#qrcode canvas {
    width: 100%;
    aspect-ratio: 1 / 1;
}
.questionOptions {
    display: flex;
    flex-direction: column;
    gap: var(--padding-small);
    width: 30ch;
}

.questionOptions span {
    display: flex;
    /*gap: var(--padding-small);*/
}

.questionOptions span button.subtle {
    aspect-ratio: 1 / 1;
}

/* -------- */
/* ARTICLES */
/* -------- */

article {
    width: fit-content;
    margin: 0 auto;
}

main:has(article) {
    width: 100%;
}

/* ------------- */
/* MOBILE LAYOUT */
/* ------------- */

@media screen and (max-width: 600px) {
    .card-container {
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
    }
    .enter-pin {
        left: unset;
        translate: 0 0;
    }
    main {
        align-items: center;
    }
    .desktop-nav{
        display:none;
    }
    .mobile-nav {
        display: flex;
    }
    nav {
        padding: var(--padding-small) var(--padding-small);
    }
    
    .logo{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}