/*
|-----------------------------------------------------------------------------------------------------------------------
| Word wrap
|-----------------------------------------------------------------------------------------------------------------------
*/

no-wrap {
    white-space: nowrap;
}

break-word {
    word-break: break-word;
}

.separator {
    display: inline-block;
    width: 2px;
    height: 4ch;
    background-color: var(--blk-1);
}

/*
|-----------------------------------------------------------------------------------------------------------------------
| Word enhancement
|-----------------------------------------------------------------------------------------------------------------------
*/

/*.required:after {
    content: '*';
    position: relative;
    top: -.25rem;
    left: .25rem;
    font-size: 1ch;
    color: var(--red-1);
}*/

.optional:after {
    content: '*';
    position: relative;
    top: -.1rem;
    left: .25rem;
    font-size: 1.5ch;
    color: var(--grn-1);
}

/*
|-----------------------------------------------------------------------------------------------------------------------
| State
|-----------------------------------------------------------------------------------------------------------------------
*/

[hidden=false]{
    opacity: 1;
    position: unset;
    transform: translate(0);
}

[hidden],
[hidden=hidden] {
    display: none !important;
}

.disabled,
[disabled]
[disabled=true] {
    opacity: .35;
    border-color: var(--blk-1) !important;
    pointer-events: none;
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
}

/* Hide tag if it has no content */

[allow-empty=false]:empty {
    display: none;
}

/* Hide empty section */

section:empty {
    display: none;
}

/* Hide child DIV if it's empty */

[show-empty-div=false] div:empty {
    display: none;
}

/*
|-----------------------------------------------------------------------------------------------------------------------
| Document
|-----------------------------------------------------------------------------------------------------------------------
*/

html,
html:focus-within {
    scroll-behavior: smooth;
}

body {
    background-color: var(--blk-3);
    font-family: var(--fnt-std);
    font-smooth: always;
    font-kerning: normal;
    text-rendering: optimizeSpeed;
    overflow-x: clip;
    overflow-y: scroll;
    scrollbar-color: var(--blk-3) var(--blk-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: clip;
}

header {
    border-bottom: solid 2px transparent;
    user-select: none;
    -webkit-user-select: none;
}

article {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    scroll-margin-block-start: 2rem;
}

@media screen and (min-width: 768px) {

    article:has(x-blob) + article:has(x-blob) {
        margin-top: -10rem;
    }
}

/*@media screen and (min-width: 768px) {

    article:has(.article-wrapper) + article:has(.article-wrapper) {
        top: -8rem;
    }
}*/

pre {
    display: flex;
    align-items: center;
    white-space: pre-line;
    overflow-wrap: anywhere;
    min-height: var(--btn-hgt);
    padding: 0 .75rem;
    margin: 0;
    border-radius: var(--rad-1);
    background-color: var(--blk-2);
    font-family: var(--fnt-fix);
    font-size: var(--siz-min);
    line-height: 1.4;
    color: var(--wht-1);
}

code {
    margin: 0 2px;
    border-radius: var(--rad-1);
    font-family: var(--fnt-fix);
    font-size: var(--siz-min);
    line-height: inherit;
    color: var(--ylw-1);
}

hr {
    width: 100%;
    height: 1px;
    margin: 0;
    border: none;
    background-color: var(--blk-2);
}

/*
|-----------------------------------------------------------------------------------------------------------------------
| Table
|-----------------------------------------------------------------------------------------------------------------------
*/

table {
    width: 100%;
    border-collapse: collapse;
}

table a:link {
    color: inherit;
}

table a:hover,
table a:active {
    color: var(--blu-0);
}

th,
tr,
td {
    font-size: var(--siz-1);
    font-weight: 400;
    text-align: left;
}

tr {
    width: 100%;
}

th {
    margin: 0;
    text-wrap: pretty;
    line-height: 1.15;
    color: var(--wht-1);
}

th,
td {
    vertical-align: top;
    height: var(--btn-hgt);
    padding: .75rem 0 0 0;
    line-height: 1.3;
}

td:first-of-type {
    white-space: pre;
    padding-right: 1.5rem;
    color: var(--wht-3);
}

td:last-of-type {
    width: 100%;
    font-weight: 500;
    color: var(--wht-1);
}

thead th {
    border: solid 2px var(--blk-0);
}

tbody tr {
    /*border-bottom: solid 1px var(--blk-1);*/
    color: var(--wht-3);
}

tfoot th {
    border-top: solid 2px var(--blk-0);
}

/*
|-----------------------------------------------------------------------------------------------------------------------
| Dialog
|-----------------------------------------------------------------------------------------------------------------------
*/

dialog.dragging:before {
    content: "";
    animation: .15s fade-in;
    z-index: 2;
}

dialog.dragging:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='none' stroke='var(--wht-1)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-circle-arrow-down-icon lucide-circle-arrow-down'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v8m-4-4l4 4 4-4'/%3E%3C/svg%3E");
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    border-radius: 1rem;
    border: dashed 2px var(--cya-1);
    animation: .15s fade-in;
    z-index: 2;
}

dialog.dragging div {
    display: none;
}

/*
|-----------------------------------------------------------------------------------------------------------------------
| Typography
|-----------------------------------------------------------------------------------------------------------------------
*/

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--fnt-hdg);
    font-weight: normal;
    line-height: 1.15;
}

p {
    margin: 0;
    font-size: var(--siz-1);
    font-family: var(--fnt-std);
    font-weight: 400;
    line-height: 1.4;
}

ul, ol {
    margin: 0;
    padding: 0 0 0 1rem;
    font-size: 1rem;
    font-family: var(--fnt-std);
}

li {
    padding: 0 0 .75rem 0;
}

p + ul,
p + ol {
    margin-top: 1rem;
    line-height: 1;
}

cite {
    font-style: normal;
}

em {
    font-style: normal;
    font-weight: 500;
    color: var(--red-1);
}

i {
    font-style: normal;
    font-weight: 500;
    color: var(--wht-1);
}


small {
    font-family: var(--fnt-std);
    line-height: 1.4;
}

a {
    text-decoration: none;
    line-height: inherit;
    cursor: pointer;
}

label a,
p a {
    font-weight: 500;
    color: inherit;
}

p a:hover,
p a:active,
p a:focus,
label a:hover,
label a:active,
label a:focus {
    opacity: .65;
}

/*
|-----------------------------------------------------------------------------------------------------------------------
| Input, textarea, label
|-----------------------------------------------------------------------------------------------------------------------
*/

input,
select {
    display: flex;
    align-items: center;
    appearance: none;
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
    padding: 0 .85rem;
    min-width: 0;
    width: 100%;
    height: var(--btn-hgt);
    border: solid 2px var(--grn-1);
    border-radius: var(--rad-1);
    background-color: var(--wht-1);
    font-family: var(--fnt-std);
    font-size: var(--siz-1);
    font-weight: 500;
    text-overflow: ellipsis;
    letter-spacing: .0125ch;
    color: var(--blk-1);
}

label {
    font-family: var(--fnt-std);
    user-select: none;
    -webkit-user-select: none;
}

label:has(input),
label:has(select),
label:has(textarea) {
    display: flex;
    width: 100%;
    font-size: var(--siz-min);
}

input::placeholder {
    color: var(--blk-0);
}

input:focus,
textarea:focus {
    outline: solid 2px var(--lim-1);
    outline-offset: 0;
}

input.select-only {
    outline: unset;
}

textarea {
    display: flex;
    align-items: center;
    field-sizing: content;
    appearance: none;
    overflow: hidden;
    margin: 0;
    padding: .85rem;
    min-width: 0;
    width: 100%;
    min-height: var(--btn-hgt);
    border: solid 2px var(--grn-1);
    border-radius: var(--rad-1);
    background-color: var(--wht-1);
    font-family: var(--fnt-std);
    font-size: var(--siz-1);
    font-weight: 500;
    text-overflow: ellipsis;
    letter-spacing: .0125ch;
    line-height: 1.4;
    color: var(--blk-1);
    resize: none;
}

[placeholder] {
    user-select: none;
    -webkit-user-select: none;
}

/* Group inputs together */

.field:has(input),
.field:has(select),
.field:has(textarea) {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    width: 100%;
}

.field label {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.field label > div {
    font-size: var(--siz-0);
    color: var(--wht-0);
}

/*
|-------------------------------------------------------------------------------------------------------------------
| Custom dropdown
|-------------------------------------------------------------------------------------------------------------------
*/

select,
input[data-select],
input[list] {
    padding-right: 66px;
    background-image:
        linear-gradient(to bottom, var(--blk-1) 0%, var(--blk-1) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='var(--wht-3)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: calc(100% - 50px) center, calc(100% - .75rem) center;
    background-size: 1px 100%, 1.5rem 1.5rem;
    background-repeat: no-repeat;
    cursor: pointer;
}

.dropdown-container {
    position: relative;
    display: inline-block;
}

.dropdown-wrapper input {
    padding-right: 3rem;
}

.dropdown-list {
    position: absolute;
    display: none;
    top: calc(100% + .5rem);
    right: 0;
    left: 0;
    border: solid 1px var(--blk-0);
    border-radius: var(--rad-1);
    background-color: var(--blk-2);
    max-height: calc(var(--btn-hgt) * 5);
    overflow-y: hidden;
    box-shadow: var(--shd-1);
    scrollbar-color: var(--blk-0) transparent;
    overflow: auto;
    z-index: 1;
    scroll-behavior: smooth;
    animation: fadeDown .125s ease-in-out forwards;
}

.dropdown-option {
    display: flex;
    align-items: center;
    appearance: none;
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
    padding: 0 .85rem;
    min-width: 0;
    width: 100%;
    height: var(--btn-hgt);
    background-color: var(--blk-2);
    font-family: var(--fnt-std);
    font-size: var(--siz-min);
    font-weight: 500;
    text-overflow: ellipsis;
    letter-spacing: .0125ch;
    color: var(--wht-1);
}

.dropdown-option:not(:last-of-type) {
    border-bottom: solid 1px var(--blk-1);
}

.dropdown-option:hover {
    background-color: var(--blk-1);
    color: var(--wht-1);
}

.dropdown-option.highlighted {
    background-color: var(--blu-2);
}

.dropdown-option:last-child {
    border-bottom: none;
}

.dropdown-input.no-match {
    outline-color: var(--ylw-1);
    transition: outline 0.125s ease-in-out;
}

.dropdown-count {
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--siz-0);
    font-weight: 500;
    text-align: right;
    color: var(--wht-3);
    pointer-events: none;
}

.dropdown-clear {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.dropdown-clear::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='var(--wht-3)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-circle-x-icon lucide-circle-x' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E");
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--btn-hgt) - 8px);
    height: calc(var(--btn-hgt) - 8px);
    padding-top: 4px;
    top: 4px;
    right: 4px;
    border-radius: var(--rad-1);
    cursor: pointer;
}

.dropdown-clear:hover::before {
    background-color: var(--blk-0);
}

.dropdown-clear:active::before {
    outline: solid 2px var(--wht-3);
}

/*
|-------------------------------------------------------------------------------------------------------------------
| Checkbox, radio
|-------------------------------------------------------------------------------------------------------------------
*/

input[type=checkbox],
input[type=radio] {
    margin: 0;
    padding: 0;
    max-width: 28px;
    min-height: unset;
    height: 28px;
    cursor: pointer;
}

input[type=checkbox] {
    border-radius: var(--rad-1);
}

input[type=radio] {
    border-radius: 50%;
}

input[type=checkbox]:not(:disabled):checked:after {
    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 6' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M1 3l2 2 4-4' fill='none' stroke='var(--grn-1)' stroke-width='2'/%3E%3C/svg%3E");
    display: block;
    position: relative;
    width: 12px;
    height: 12px;
    bottom: 5px;
    left: 7.5px;
}

input[type=radio]:not(:disabled):checked:after {
    content: "";
    display: block;
    position: relative;
    background-color: var(--grn-1);
    width: 10px;
    height: 10px;
    left: 8px;
    border-radius: 10px;
}

/* Group multiple options */

.option-group:has(.option) {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
}

/* Group single option components */

.option:has(input) {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: .75rem;
}

.option:has(input) label {
    top: 3px;
    line-height: 1.4;
}

/*
|-----------------------------------------------------------------------------------------------------------------------
| Custom checkbox, radio
|-----------------------------------------------------------------------------------------------------------------------
*/

input[type=checkbox].switch {
    max-width: 44px;
    height: 28px;
    border-radius: 14px;
    background-color: var(--blk-2);
}

input[type=checkbox].switch:checked {
    background-color: var(--blk-2);
}

input[type=checkbox].switch:not(:checked):before {
    background-color: var(--blk-1);
}

input[type=checkbox].switch:before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    border-radius: 50%;
    background-color: var(--grn-1);
    transition: margin 0.1s ease-in-out;
}

input[type=checkbox].switch:checked::before {
    margin-left: 20px;
}

input.no-state[type=checkbox].switch:before {
    opacity: 0;
}

label:has([type=file]) {
    position: relative;
    width: auto;
}

input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

/*
|-----------------------------------------------------------------------------------------------------------------------
| Label
|-----------------------------------------------------------------------------------------------------------------------
*/

input + label {
    display: flex;
    width: 100%;
}

input::-webkit-calendar-picker-indicator {
    display: none !important;
}

label:has(input[type=checkbox]) {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

[type=checkbox] + label,
[type=radio] + label {
    position: relative;
    font-size: var(--siz-1);
    color: var(--wht-1);
}

label > input[type=checkbox].switch + span {
    position: relative;
    font-size: var(--siz-1);
    line-height: 1.4;
    color: var(--wht-1);
}

label:hover:has(input[type=checkbox]:not(:checked)),
label:hover:has(input[type=radio]:not(:checked)) {
    border-color: var(--wht-1);
}

label textarea {
    height: calc(var(--btn-hgt) * 3);
}

/*
|-----------------------------------------------------------------------------------------------------------------------
| Button
|-----------------------------------------------------------------------------------------------------------------------
*/

button,
[data-role=button] {
    appearance: none;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    width: fit-content;
    padding: 0 1.25rem;
    margin: 0;
    min-height: var(--btn-hgt);
    border: none;
    border-radius: calc(var(--btn-hgt) / 2);
    background-color: var(--grn-2);
    background: linear-gradient(to bottom, var(--grn-2) 0%, var(--grn-3));
    font-size: var(--siz-1);
    font-family: var(--fnt-btn);
    font-weight: 500;
    text-align: center;
    letter-spacing: .0125ch;
    color: var(--wht-1);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

button:hover,
[data-role=button]:hover {
    background: linear-gradient(to bottom, var(--grn-1) 0%, var(--grn-3));
}

button:active,
[data-role=button]:active {
    background: linear-gradient(to bottom, var(--grn-0) 0%, var(--grn-3));
}

/*
|-----------------------------------------------------------------------------------------------------------------------
| Progress
|-----------------------------------------------------------------------------------------------------------------------
*/

progress[value] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 6px;
    border: none;
    border-radius: 5px;
    background: var(--blk-3);
}

progress[value]::-webkit-progress-bar {
    border-radius: 10em;
    background: var(--blk-3);
}

progress[value]::-webkit-progress-value {
    border-radius: 10em;
    background: var(--blk-0);
}

progress[value]::-moz-progress-bar {
    border-radius: 10em;
    background: var(--blk-0);
}

/*
|-----------------------------------------------------------------------------------------------------------------------
| Autofill
|-----------------------------------------------------------------------------------------------------------------------
*/

input:-webkit-autofill {
  appearance: none;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    caret-color: var(--wht-1) !important;
    color: var(--wht-1) !important;
    background-color: var(--blk-1) !important;
    box-shadow: 0 0 0px 1000px var(--blk-2) inset !important;
    -webkit-text-fill-color: var(--wht-1) !important;
}

input:-webkit-autofill:hover,
textarea:-webkit-autofill:hover,
select:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
    background-color: var(--blk-1) !important;
    background-clip: content-box !important;
    color: var(--wht-1) !important;
    -webkit-box-shadow: 0 0 0 60px var(--blk-2) inset !important;
    -webkit-text-fill-color: var(--wht-1) !important;
}

input[type=text]:-webkit-autofill {
    background-color: var(--blk-3);
    -webkit-transition: none;
    transition: none;
}

input[type=text]::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none;
    position: absolute;
    right: 0;
    pointer-events: none;
}

/*
|-----------------------------------------------------------------------------------------------------------------------
| Grid wrapper
|-----------------------------------------------------------------------------------------------------------------------
*/

@media screen and (max-width: 767px) {

    .grid-wrapper-small,
    .grid-wrapper-medium,
    .grid-wrapper-large {
        position: relative;
        display: grid;
        gap: 2rem;
        width: 100%;
        max-width: 1280px;
    }

    .grid-wrapper-small {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-wrapper-medium {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-wrapper-large {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {

    .grid-wrapper-small,
    .grid-wrapper-medium,
    .grid-wrapper-large {
        position: relative;
        display: grid;
        gap: 2rem;
        width: 100%;
        max-width: 1280px;
    }

    .grid-wrapper-small {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-wrapper-medium {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-wrapper-large {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1280px) {

    .grid-wrapper-small,
    .grid-wrapper-medium,
    .grid-wrapper-large {
        position: relative;
        display: grid;
        gap: 2rem;
        width: 100%;
        max-width: 1280px;
    }

    .grid-wrapper-small {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-wrapper-medium {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-wrapper-large {
        grid-template-columns: repeat(3, 1fr);
    }
}