:root {
    --linkColor: currentColor; 
    --linkHover: currentColor;

    --appRadius: 2rem;
    --headingsSize: clamp(2rem, 2vw, 3rem);

    --globalTime: 500ms;
    --utilityBarHeight: 6rem;

    --hrMargin: var(--space-1);
}

[dark-mode] {
    --bgColor: #121318;
    --bgColorRGA: rgb(18 19 24 / var(--aaa,.6));
    --inputBg: #161B22;
    --inputBgHover: var(--inputBg);
    --inputBgActive: var(--inputBg);
    --inputBorderColor: #30363D;
    --foreground: #121E2F;
}

* { scrollbar-width: auto; scrollbar-color: #63696C #1F282D }
*::-webkit-scrollbar { width: 15px }
*::-webkit-scrollbar-track { background: #1F282D }
*::-webkit-scrollbar-thumb { background-color: #63696C; border-radius: var(--appRadius); border: 3px solid #1F282D }

a { text-decoration: none }
html,body { overflow-x: hidden } 
main { width: 100%; position: relative }
main section { width: 100% }

#app { max-width: 777px; margin: 0 auto; min-height: calc(var(--vh, 1vh) * 100) }

header { position: fixed; inset-block-start: 0px; inset-inline: 0px; z-index: 999; padding-inline: var(--padding) }

header .status-bar { margin: var(--margin) auto; gap: 0.5rem; width: fit-content }

header .status-bar > x-cell {
    padding: .2rem 1rem;
    margin-inline: .2rem;
    min-width: fit-content;
    border-radius: 100vw;
    border: 1px solid var(--inputBorderColor);
    background: rgb(22 27 34 / 40%);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);

    animation-fill-mode: both; 
    animation-name: var(--animation-name, fadeInLeft);
    animation-duration: var(--globalTime);
    animation-delay: calc(var(--tDelay) * 60ms);
    animation-timing-function: var(--easeOutQuint);
}

body[support-status="loading"] { --statusColor: var(--blue) }
body[support-status="online"] { --statusDayColor: var(--green); --statusColor: var(--green) }
body[support-status="online"]:is([data-progress="93"],[data-progress="94"],[data-progress="95"],[data-progress="96"],[data-progress="97"],[data-progress="98"],[data-progress="99"]) { --statusDayColor: var(--orange); --statusColor: var(--orange) }
body[support-status="offline"] { --statusDayColor: var(--blue); --statusColor: var(--red) }

.openHours::before {
    content: "";
    background: var(--statusColor);
    display: inline-block;
    border-radius: 100vw;
    padding: 5px;
    margin-right: 5px;
}
.openHours::after { content: attr(support-status); }

header .player { max-width: 150px; vertical-align: middle }
header .player marquee { font-size: 1.2rem; line-height: 1; padding: 0; margin: 0; vertical-align: middle; width: 100%; max-width: 150px }
@media (max-width: 777px) { header .player { max-width: 90px } }

#openthinking { fill: currentColor }

/** 
 *  General
 */
.heading {
    --hWeight: 400; 
    margin: 0;
    padding: 0;
    font-size: var(--headingsSize); 
    line-height: 1.3;
}

.close-button { position: absolute; top: 0; right: var(--padding); z-index: 99; }
.h-5.w-5, .h-6.w-6 { width: 48px; height: 48px }

.backdrop {
    background: var(--bgColorRGA);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
}

/** 
 *  Sections
 */
.utility-bar { padding: var(--margin) }

.buttonplatform {
    padding: var(--padding);
    border-top-left-radius: var(--appRadius);
    border-top-right-radius: var(--appRadius);
}

/** Welcome section */
#welcome { 
    display: flex; 
    flex-direction: column; 
    min-height: calc(var(--vh, 1vh) * 100);
    padding: var(--utilityBarHeight) var(--padding) var(--margin);

    transition: all var(--globalTime) var(--easeInOutQuart);
    opacity: 1;
    transform: none;
    filter: blur(0); 
}


#welcome .actions .cards { gap:.3rem }
#welcome .actions .cards :where(x-cell a, x-cell label) {
    --linkColor: currentColor;
    --linkHover: currentColor;
    display: flex;
    flex-direction: column;
    border-radius: var(--appRadius);
    padding: var(--padding) .15rem;
    background: var(--inputBg);
    border: 1px solid transparent;
    min-width: fit-content;
}

#welcome .actions .cards .radio :where(label,a) { cursor: pointer; padding: var(--padding); min-height: 111px; line-height: 1.1; flex-direction: column; align-items: start; margin: 0; font-size: var(--fontSize); }
#welcome .actions .cards .emoji { font-size: 2.8rem; }
#welcome .actions .cards .radio :where(label,a) > *:last-child { margin-top: auto }

#welcome .actions .cards .radio .input:checked + .label,
#welcome .actions .cards .radio .input[type="radio"]:focus-visible + .label { border-color: var(--blue); box-shadow: 0 0 10px var(--blue) }

#welcome .actions label span { margin: 0 }

#welcome .hello { --rowGap: 2.5rem; --columnGap: 2.5rem }

.pop {
    animation-fill-mode: both;
    animation-name: zoomIn;
    animation-duration: var(--globalTime);
    animation-delay: calc(var(--tDelay) * 60ms);
    animation-timing-function: var(--easeOutQuint);
}

.pop.quickLinks a { padding: calc(var(--padding) / 2) calc(var(--margin) * 1.3)!important }

/** Policy section */
#terms { height: 100%; min-height: calc(var(--vh, 1vh) * 100) }

.workingHours { --rowGap: var(--margin) }
.workingHours li { margin: 0 }

body[data-today="Monday"]       span[title="Monday"],
body[data-today="Tuesday"]      span[title="Tuesday"],
body[data-today="Wednesday"]    span[title="Wednesday"],
body[data-today="Thursday"]     span[title="Thursday"],
body[data-today="Friday"]       span[title="Friday"] { border: 1px solid var(--statusDayColor); box-shadow: 0 0 10px var(--statusDayColor); }

body[data-today="Saturday"]     span[title="Saturday"],
body[data-today="Sunday"]       span[title="Sunday"] { --b4bg: var(--red); border: 1px solid var(--red); box-shadow: 0 0 10px var(--red) }

.workingHours .label { margin-bottom: var(--padding) }

.workingHours :where(.days,.time) span {
    display: grid;
    place-items: center;
    border-radius: 100vh;
    background: var(--inputBorderColor);
    border: 1px solid var(--inputBorderColor);
    cursor: default;
    user-select: none;
    height: calc(var(--fontSize) * 2);
}

.workingHours .time span { padding-inline: var(--fontSize) }
.workingHours .days span { line-height: 0; aspect-ratio: 1 / 1 }

.workingHours span.off { position: relative; background: none }

.workingHours .time span.off { border: none; padding: 0 }
.workingHours .days span.off { color: var(--inputBorderColor); cursor: not-allowed; border-width: 2px }

.workingHours .days span.off::before {
    content: '';
    position: absolute;
    width: 100%;
    background: var(--b4bg, var(--inputBorderColor));
    height: 2px;
    transform: rotate(45deg);
}

.timeReply {
    .time { gap: 0; }
    x-cell { line-height: 1 }
    small { color: #858587; line-height: 1; font-size: var(--type-1) }
    strong {
        display: inline-grid;
        place-items: center;
        border-radius: 100vw;
        aspect-ratio: 1 / 1;
        padding: var(--space-1) var(--space-3);
        margin-inline-end: var(--space-1);
        background: var(--inputBorderColor);
    }
}

body[data-holiday="true"] :where(.responseTimeCard,.workingHours) { display: none }

.wordSmall { font-size: smaller }

.wordHighlighter {
    display: inline-block;
    padding-inline: 4px;
    background: #30363D;
    border-radius: 5px;
}

x-notice { display: none }

x-notice:not(:empty) {
    display: block;
    color: var(--yellow);
    background: rgba(0,0,0,.25);
    box-shadow: 0px 0px 10px currentColor;
    font-size: 1.5rem;
    border: 1px solid currentColor;
    border-radius: var(--appRadius);
    margin-bottom: calc(var(--margin) * 2);
    padding: var(--margin);
}

.bar {
    --pMargin: 1rem;

    position: relative;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgb(255 255 255 / 8%);
}

.bar legend {
    padding: 0 var(--padding);
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: .3rem;
    font-size: 1rem;
}

/* Default state */
#form, #policy, #sent { 
    background: var(--bgColor);
    border-radius: var(--appRadius);
    width: auto;
    margin: var(--padding);
    position: absolute; 
    top: var(--utilityBarHeight); 
    z-index: 1; 
    max-height: 50vh;
    overflow: hidden;
    pointer-events: none;

    opacity: 0; 
    filter: blur(8px);
    transform: scale(1.4);
    transform-origin: top;
    transition: transform var(--globalTime) var(--easeInOutQuart), filter var(--globalTime) var(--easeInOutQuart), opacity var(--globalTime) var(--easeInOutQuart);
}

body.sent #sent,
body.compose #form,
body.policy #policy { pointer-events: all; }

#policy::after { content: ""; height: calc(var(--margin) * 3); display: block }

/* Alter state */
body:where(.compose,.policy,.sent) #welcome { 
    opacity: 0; 
    transform: scale(0.9) rotateX(45deg); 
    filter: blur(8px);
    max-height: initial; 
    overflow-y: visible 
}

body.compose #form,
body.policy #policy,
body.sent #sent { 
    top: var(--utilityBarHeight);
    opacity: 1; 
    z-index: 10; 
    filter: blur(0); 
    transform: none; 
    max-height: initial; 
    min-height: calc(var(--vh, 1vh) * 90);
    overflow: visible;
    overscroll-behavior: contain;
}

body.policy.compose.sent :where(#policy,#compose),
body.policy.compose #policy, 
body.compose #policy { 
    opacity: 0; 
    transform: scale(0.9); 
    filter: blur(8px); 
    pointer-events: none; 
    max-height: initial; 
    overflow-y: visible
}

.link-hr { display: flex; align-items: center; justify-content: center }
.link-hr > * { border: 1px solid var(--inputBorderColor);padding: var(--buttonPadding); border-radius: 100vw; color: currentColor; }
.link-hr::before, .link-hr::after { content: ""; flex: 1; border-bottom: 1px solid var(--inputBorderColor) }

#policy .utility-bar { margin-bottom: calc(var(--margin) * 1) }

/** Compose section */
.simple-files { margin: 0!important }

#form { --inputBorderWidth: none; background: var(--inputBg); padding-inline: 0; margin: var(--padding); border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
#form::after { content: ""; height: 8rem; display: block }

#form > div { border-bottom: 1px solid var(--inputBorderColor); padding: var(--padding) }
#form label { color: var(--inputPlaceholderColor); font-weight: normal; margin-block: 1rem }
#form small{ font-size:1rem; opacity: 0.4; line-height: 1.6 }

#form .mailreceipt { padding: var(--margin) var(--padding)!important; border-top: 1px solid var(--inputBorderColor) }
#form .mailreceipt .to { color:var(--inputPlaceholderColor) }
#form .mailreceipt .ot { display: flex; align-items: center; padding: var(--space-1) var(--space-3); background: #2B2645; border: 1px solid #584E7A; color: #C0A7F3; border-radius: 100vw }

#form .mailreceipt .ot::before {
    content: '';
    display: inline-block;
    background: #C0A7F3;
    aspect-ratio: 1 / 1;
    width: 1rem;
    border-radius: 100vw;
    margin-inline-end: var(--space-1);
}

body[support-status="online"] #form .mailreceipt .ot::before { background: var(--statusDayColor) }

#form textarea { padding-left:0; padding-right: 0; }

#form .consent { padding: var(--inputPadding); padding-bottom: 0; margin: var(--margin) 0; }
#form .custom-checkbox-label { color: var(--inputPlaceholderColor); font-size: 1.2rem; font-weight: 400; align-items: start; gap: 0.4rem }
#form .custom-checkbox-label a { --linkColor: currentColor; --linkHover: currentColor; border-bottom: 1px solid currentColor; }

#form .svg-arrow circle { fill: var(--primary); } 
#form .svg-arrow path { fill: var(--white); }

#submitform.is-loading > * { display: none }

.sf-short-response { margin: var(--margin); position: absolute; top: var(--utilityBarHeight); font-size: clamp(3rem, 3vw, 4rem); display: block; width: 100%; color: var(--green) }

.sf-success-message {
    font-size: clamp(1.5rem,2vw,2rem);
    text-align: center;
    color: var(--green);
    border: 1px solid currentColor;
    border-radius: 100vw;
    padding: var(--padding);
}

details summary::-webkit-details-marker { display: none }

details.attachment-dropdown > summary {
    cursor: pointer;
    text-align: center;
    color: var(--inputPlaceholderColor);
    display: flex;
    outline: none!important;
    box-shadow: none!important;
    place-content: center;
    padding: var(--padding) calc(var(--buttonPadding) * 1.5);
    width: fit-content;
    margin: 0 auto;
    border-radius: 100vw;
    border: 1px solid transparent;
    transition: all 250ms ease-in-out;
    gap: calc(var(--padding) / 1.2);
    place-items: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: small;
}

details[open].attachment-dropdown > summary,
details.attachment-dropdown > summary:hover,
details.attachment-dropdown > summary:focus-visible {
    background: var(--bgColor);
    border-color: var(--inputBorderColor);
}

details.attachment-dropdown > summary:focus-visible {
    box-shadow: var(--a11yStyle) var(--a11yColor)!important;
    outline: var(--a11yOutline)!important;
}

/**
.captchar { display: grid; place-items: center; padding: var(--margin); border-bottom: 1px solid var(--inputBorderColor) }
.simple-captcha-wrapper { background: white; padding: var(--padding); border-radius: 1rem }
**/

/* Sent section */
body.sent #sent {
    background: var(--inputBg);
    height: fit-content;
    min-height: auto;

    .sentit { color: var(--green) }
}

.carti > li {
    padding: var(--space-4);
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgb(255 255 255 / 8%);
    display: block;
    font-size: smaller;
}

.successBox {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
.check-container {
    width: 25rem;
    height: 28rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
    aspect-ratio: 1 / 1;

    .check-background {
        width: 100%;
        height: calc(100% - 1.25rem);
        background: var(--green);
        box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset,
            0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
        transform: scale(0.84);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;

        svg {
            width: 65%;
            transform: translateY(0.25rem);
            stroke-dasharray: 80;
            stroke-dashoffset: 80;
        }
    }

    .check-shadow {
        bottom: calc(-15% - 5px);
        left: 0;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(73, 218, 131, 1), transparent);
    }
}

/* Run animation only when ?tab=sent is active */
body.sent {
    @media(min-width: 777px) {
        .utility-bar { height: var(--clippityCloppy); overflow: clip; animation: animateReveal 1s forwards 2s var(--easeInOutExpo) }
    }

    .check-background {
        animation: animateContainer 0.75s ease-out forwards 0.75s;
        svg { animation: animateCheck 0.35s forwards 1.25s ease-out }
    }
    .check-shadow { animation: animateShadow 0.75s ease-out forwards 0.75s }
}

@keyframes animateReveal {
    0% { height: var(--clippityCloppy) }
    100% { height: fit-content; overflow: auto; }
}

@keyframes animateContainer {
    0% {
        opacity: 0;
        transform: scale(0);
        box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset,
            0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
    }
    25% {
        opacity: 1;
        transform: scale(0.9);
        box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset,
            0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
    }
    43.75% {
        transform: scale(1.15);
        box-shadow: 0px 0px 0px 43.334px rgba(255, 255, 255, 0.25) inset,
            0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
    }
    62.5% {
        transform: scale(1);
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset,
            0px 0px 0px 21.667px rgba(255, 255, 255, 0.25) inset;
    }
    81.25% {
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset,
            0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;
    }
    100% {
        opacity: 1;
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset,
            0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;
    }
}

@keyframes animateCheck { from { stroke-dashoffset: 80 } to { stroke-dashoffset: 0 } }

@keyframes animateShadow {
    0% { opacity: 0; width: 100%; height: 15% }
    25% { opacity: 0.25 }
    43.75% { width: 40%; height: 7%; opacity: 0.35 }
    100% { width: 85%; height: 15%; opacity: 0.25 }
}

/** Mobile */
@media (max-width: 600px) {
    :root { --inputFontSize: 1.2rem; --fontSize: 1.2rem; --utilityBarHeight: 4rem; }
    #welcome .actions .cards { gap: 2px }
    #welcome { margin-inline: 0; min-height: calc(var(--vh, 1vh) * 100); padding-top: calc(var(--utilityBarHeight) * 1.6) }
    .heading { margin-bottom: 2rem; }

    body { min-height: calc(var(--vh, 1vh) * 100); min-height: -webkit-fill-available; }
    html,#app { height: -webkit-fill-available; }
}