/* Constants */
:root {
    --controls-height: 26px;
    --controls-radius: calc(var(--controls-height) / 2);

    --transition-speed: 0.4s;
    --hover-speed: 0.2s;
    --active-speed: 0.04s;

    --hover-opacity: 0.6;
    --active-opacity: 1.0;

    --header-padding: 10px;
    --header-height: calc(var(--controls-height) + var(--header-padding) * 2 + 1px);

    --gap: 6px;
    --toggle-width: 52px;
    --form-col-width: 250px;
}

/* Accent Analogy 4 colors scheme with AAA Normal pass: usually contrast > 7 between Light and Dark, (worst case 5.4 is usually not achievable - text must be the topmost element of big-height background) */
html {
    --colorTintedBg: #7777;

    --colorSaturation: 60%;  /* pastel colors */

    --colorLightnessLightest: 90%;
    --colorLightnessLight: 70%;
    --colorLightnessDark: 20%;
    --colorLightnessDarkest: 10%;

    --colorMainHue: 93;
    --colorMainLightest: hsl(var(--colorMainHue), var(--colorSaturation), var(--colorLightnessLightest));
    --colorMainLight: hsl(var(--colorMainHue), var(--colorSaturation), var(--colorLightnessLight));
    --colorMainDark: hsl(var(--colorMainHue), var(--colorSaturation), var(--colorLightnessDark));
    --colorMainDarkest: hsl(var(--colorMainHue), var(--colorSaturation), var(--colorLightnessDarkest));

    --colorAHue: 180;  /* 154 */
    --colorALightest: hsl(var(--colorAHue), var(--colorSaturation), var(--colorLightnessLightest));
    --colorALight: hsl(var(--colorAHue), var(--colorSaturation), var(--colorLightnessLight));
    --colorADark: hsl(var(--colorAHue), var(--colorSaturation), var(--colorLightnessDark));
    --colorADarkest: hsl(var(--colorAHue), var(--colorSaturation), var(--colorLightnessDarkest));

    --colorBHue: 60;  /* 70 */
    --colorBLightest: hsl(var(--colorBHue), var(--colorSaturation), var(--colorLightnessLightest));
    --colorBLight: hsl(var(--colorBHue), var(--colorSaturation), var(--colorLightnessLight));
    --colorBDark: hsl(var(--colorBHue), var(--colorSaturation), var(--colorLightnessDark));
    --colorBDarkest: hsl(var(--colorBHue), var(--colorSaturation), var(--colorLightnessDarkest));

    --colorAccentHue: 342;
    --colorAccentLightest: hsl(var(--colorAccentHue), var(--colorSaturation), var(--colorLightnessLightest));
    --colorAccentLight: hsl(var(--colorAccentHue), var(--colorSaturation), var(--colorLightnessLight));  /* Direct contrast with dark - 5, but with bg gradient - 7+ */
    --colorAccentDark: hsl(var(--colorAccentHue), var(--colorSaturation), var(--colorLightnessDark));   /* Direct contrast with light - 5, but with bg gradient - 7+ */
    --colorAccentDarkest: hsl(var(--colorAccentHue), var(--colorSaturation), var(--colorLightnessDarkest));
}

/* Light theme */
.themed {
    --colorMain: var(--colorMainDark);
    --colorMainBg: linear-gradient(to top, var(--colorMainLightest), var(--colorMainLight));
    --colorA: var(--colorADark);
    --colorABg: linear-gradient(to bottom, var(--colorALightest), var(--colorALight));
    --colorB: var(--colorBDark);
    --colorBBg: linear-gradient(to bottom, var(--colorBLightest), var(--colorBLight));
    --colorAccent: var(--colorAccentDark);
    --colorAccentBg: linear-gradient(to bottom, var(--colorAccentLightest), var(--colorAccentLight));
    --colorDisabled: #777;
    --colorDisabledBg: linear-gradient(to bottom, hsl(0, 0%, var(--colorLightnessLightest)), hsl(0, 0%, var(--colorLightnessLight)));
    --colorNoteUnpacked: var(--colorAHue), var(--colorSaturation), var(--colorLightnessDarkest);
    --colorGlowUnpacked: var(--colorBHue), var(--colorSaturation), var(--colorLightnessDarkest);
    --BgImg: url('../static/images/bgl.png'), linear-gradient(to top, var(--colorALightest), var(--colorALight));
}

/* Dark theme */
#theme_switch_checkbox:checked ~ .themed {
    --colorMain: var(--colorMainLight);
    --colorMainBg: linear-gradient(to bottom, var(--colorMainDark), var(--colorMainDarkest));
    --colorA: var(--colorALight);
    --colorABg: linear-gradient(to bottom, var(--colorADark), var(--colorADarkest));
    --colorB: var(--colorBLight);
    --colorBBg: linear-gradient(to bottom, var(--colorBDark), var(--colorBDarkest));
    --colorAccent: var(--colorAccentLight);
    --colorAccentBg: linear-gradient(to bottom, var(--colorAccentDark), var(--colorAccentDarkest));
    --colorDisabled: #777;
    --colorDisabledBg: linear-gradient(to bottom, hsl(0, 0%, var(--colorLightnessDark)), hsl(0, 0%, var(--colorLightnessDarkest)));
    --colorGlowUnpacked: var(--colorBHue), var(--colorSaturation), var(--colorLightnessLightest);
    --BgImg: url('../static/images/bgd.png'), linear-gradient(to top, var(--colorADark), var(--colorADarkest));
}

/* Common themed elements borders */
.notification, .popup, .story,
.tag, .info,
input, button, select, textarea, .control, .toggle::after, .warning,
.notification_error {
    border: 1px solid;
    border-radius: var(--controls-radius);
}

/* Themed Main elements (notification, popup, story) */
#page { color: var(--colorMain) }
.notification, .popup, .story {
    background: var(--colorMainBg);
    color: var(--colorMain);
    border-color: var(--colorMain);
}

/* Themed A elements (background, tags) */
#bg { background: var(--BgImg) }  /* Uses Theme A colors for transparent sky background gradient */
.tag, .info {
    background: var(--colorABg);
    color: var(--colorA);
    border-color: var(--colorA);
}

/* Themed B elements + disabled (controls) */
input, button, select, textarea, .control, .toggle::after, .warning {
    color: var(--colorB);
    border-color: var(--colorB);
    background: var(--colorBBg);
    cursor: pointer;
}
input[disabled], button[disabled], select[disabled], textarea[disabled], .control[disabled] {
    color: var(--colorDisabled);
    border-color: var(--colorDisabled);
    background: var(--colorDisabledBg);
    cursor: default;
}

/* Themed Accent elements (errors) */
.notification_error, input:not(:placeholder-shown):invalid, textarea:not(:placeholder-shown):invalid {
    color: var(--colorAccent);
    border-color: var(--colorAccent);
    background: var(--colorAccentBg);
}


/* Page settings */
body, main, #header_left h1, .story h3 { margin: 0 }
#page {
    display: flex;
    flex-direction: column;
}
#pages {
    display: flex;
    justify-content: center;
    gap: var(--gap);
}
.page_buttons {
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
}
header, footer {
    display: flex;
    padding: var(--header-padding);
    height: var(--controls-height);
    background-color: var(--colorTintedBg);
}
header {
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid;
}
footer {
    justify-content: center;
    gap: var(--gap);
    border-top: 1px solid;
}
footer a {
    display: flex;
    align-items: center;
}
#header_left {
    color: var(--colorMain);
    display: flex;
    align-items: center;
    gap: var(--gap);
}
#header_right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap);
    position: relative;
    right: calc(var(--toggle-width) + var(--gap));
}
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    padding: var(--gap);
    gap: var(--gap);
    min-width: 346px;  /* Absolute min - 334px (story cards), 346px (pretty notifications) */
}

/* Move scrolling from #page to main */
#page, main {
    box-sizing: border-box;  /* Compensate borders and paddings if exists */
    height: 100%             /* All elements height (except first) - 100% */
    overflow: hidden;        /* No any overflow expected (except last) */
}
#page { height: 100vh }      /* First element height - 100vh */
main { overflow: auto }      /* Last element - allow overflow */

/* Common web-safe, kid-friendly font */
@font-face {
    font-family: 'Comic Sans MS';
    src: url("Comic Sans MS.ttf");
}
* { font-family: "Comic Sans MS", cursive }

/* Common non-selectable */
img, .control, info_icon { user-select: none }

/* Common help elements */
s, u { cursor: help }

/* Common menu settings (Mobile/Desktop styles) */
#header_content {
    display: flex;
    gap: var(--gap);
    padding: var(--header-padding);
    align-items: center;
}
#header_content form {
    display: flex;
    gap: var(--gap);
}


/* Common controls */
input, button, select, textarea, .control, .toggle::after, .tag {
    height: var(--controls-height);
    box-sizing: border-box;
    padding: 0 8px;
    transition: filter var(--hover-speed) ease-out;
}
.button_img, .story { transition: filter var(--hover-speed) ease-out }
input, textarea, .warning { cursor: unset !important }  /* Restore default cursor overridden by theme */
textarea { height: auto !important } /* Restore default height overridden by .control */
select:invalid, input::placeholder { color: gray }
a { text-decoration: none }
a[disabled] { pointer-events: none; }

/* Common controls hover */
input:hover:not([disabled]), button:hover:not([disabled]), select:hover:not([disabled]), textarea:hover:not([disabled]), .control:hover:not([disabled]), .button_img:hover:not([disabled]), .story:hover {
    filter: drop-shadow(0 0 6px hsla(var(--colorGlowUnpacked), var(--hover-opacity)));
}

/* Common controls active (buttons, inputs) / focus (inputs) */
button:active:not([disabled]), input[type="button"]:active:not([disabled]), input[type="submit"]:active:not([disabled]), .control:active:not([disabled]), .button_img:active:not([disabled]), .story:active,
input:not([type="button"]):not([type="submit"]):active:not([disabled]), textarea:active:not([disabled]), select:active:not([disabled]),
input:not([type="button"]):not([type="submit"]):focus:not([disabled]), textarea:focus:not([disabled]), select:focus:not([disabled]) {
    filter: drop-shadow(0 0 8px hsla(var(--colorGlowUnpacked), var(--active-opacity)));
    outline: none;
}

/* Common controls active (buttons-only) speed */
button:active:not([disabled]), input[type="button"]:active:not([disabled]), input[type="submit"]:active:not([disabled]), .control:active:not([disabled]), .button_img:active:not([disabled]), story:active {
    transition: filter var(--active-speed) ease-in;
}


/* Toggle background */
.toggle {
    --toggle-stretch: 10px;
    --toggle-knob-margin: 1px;
    --toggle-knob-font-size: 0.75rem;

    --toggle-knob-size: calc(var(--controls-height) - var(--toggle-knob-margin) * 2 - 2px);

    display: flex;
    position: relative;
    width: var(--toggle-width);
    padding: 0px;  /* Revert horizontal padding change in common controls */
}

/* Toggle knob animations (cannot be handled by transition) */
@keyframes toOn {
    0% { color: var(--colorB); border-color: var(--colorB); background: var(--colorBBg); }
    100% { color: var(--colorA); border-color: var(--colorA); background: var(--colorABg); }
}
@keyframes toOff {
    0% { color: var(--colorA); border-color: var(--colorA); background: var(--colorABg); }
    100% { color: var(--colorB); border-color: var(--colorB); background: var(--colorBBg); }
}

/* Toggle knob off */
.toggle::after {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    font-size: var(--toggle-knob-font-size);
    top: var(--toggle-knob-margin);
    left: var(--toggle-knob-margin);
    width: var(--toggle-knob-size);
    height: var(--toggle-knob-size);
    transition: var(--transition-speed);
    animation: toOn var(--transition-speed);
}

/* Toggle knob on */
.toggle_checkbox:checked + .toggle::after {
    left: calc(100% - var(--toggle-knob-margin));
    transform: translateX(-100%);
    background: var(--colorABg);
    animation: toOff var(--transition-speed);
}

/* Toggle knob enlarging animation at click */
.toggle:active::after { width: calc(var(--toggle-knob-size) + var(--toggle-stretch)) }

/* Theme toggle knob content animations (cannot be handled by transition) */
@keyframes toDark {
    0% { content: "\263C" }
    50% { color: transparent }
    100% { content: "\263E" }
}
@keyframes toLight {
    0% { content: "\263E" }
    50% { color: transparent }
    100% { content: "\263C" }
}
.toggle_checkbox:checked + .theme_toggle::after {
    content: "\263E";
    animation: toOn var(--transition-speed), toDark var(--transition-speed);
}
.theme_toggle::after {
    content: "\263C";
    animation: toOff var(--transition-speed), toLight var(--transition-speed);
}

/* Theme switch visual position change with overlaying transparent submit button when js is disabled */
#theme_switch, #theme_switch_submit {
    position: absolute;
    top: var(--header-padding);
    right: var(--header-padding);
}
#theme_switch_submit {
    border: none;
    background: transparent;
    width: var(--toggle-width);
    transition: box-shadow var(--hover-speed) ease-out;
}
#theme_switch_submit:hover {
    box-shadow: 0 0 6px hsla(var(--colorGlowUnpacked), var(--hover-opacity));
}


/* Fullscreen elements */
#bg, .overlay, .popup {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
}
#bg { z-index: -1 }
.overlay {
    z-index: 10;
    cursor: default;
    background-color: #000A;
}

/* Common overlay and modal window states switching (default, activated) */
.overlay, .popup {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--transition-speed) ease-out,
        visibility var(--transition-speed) ease-out;
}
.overlay:target, .overlay:target + .popup {
    opacity: 1;
    visibility: visible;
}

/* Modal window */
.popup {
    position: absolute;
    margin: auto;
    width: fit-content;
    height: fit-content;
    max-width: calc(100% - var(--controls-height) * 2);
    max-height: calc(100% - var(--controls-height) * 2);
    overflow-y: auto;
    z-index: 20;
    padding: var(--header-padding);
    box-shadow: 0 15px 20px rgba(0,0,0,.22), 0 20px 60px rgba(0,0,0,.3);
    text-align: center;
}
.popup > * > * { margin: var(--gap) }  /* Form child elements (all .popup has only one form) */

/* Common Register and New story forms structure */
#register_form, #new_story_form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: calc(var(--form-col-width) * 2 + var(--gap) * 4);  /* Two columns with margins */
}

/* Register form structure */
.form_group {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: var(--form-col-width);
}
.form_field {
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* New story form structure */
#new_story_form textarea {
    resize: none;
    width: 100%;
}


/* Stories structure */
#stories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gap);
}
.story {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: fit-content;
    max-width: 1024px;
    padding: var(--gap);
}
.story img {
    border-radius: calc(var(--controls-radius) - var(--gap));
}
#stories .story {
    width: min-content;
    max-width: 100%;
    text-decoration: none;
}
.thumb { width: 320px; height: 240px }
#cover { width: 100% }
.story > h3 { text-align: center }
.story > h2 { text-align: center; margin: var(--gap) 0}
.story p {
    text-indent: 3ch;
    text-align: justify;
    margin: var(--gap);
}

/* Common tags structure (Mobile/Desktop styles) */
#tags_group {
    gap: var(--gap);
    cursor: default;
    margin: var(--gap);
    align-self: baseline;
    align-items: baseline;
}
.tag { max-width: 84vw; overflow: hidden; width: min-content; white-space: nowrap; text-overflow: ellipsis; }

/* Notifications structure */
#notifications_layout {
    z-index: 15;
    position: absolute;
    top: calc(var(--header-height) + var(--gap));
    right: var(--gap);
    margin-left: var(--gap);
    display: flex;
    flex-direction: column;
    width: fit-content;
    align-self: right;
    gap: var(--gap);
    pointer-events: none;
}
.notification {
    min-width: 312px;  /* Best for minimal site width */
    max-width: 600px;
    padding: var(--header-padding);
    text-align: left;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6);
    opacity: 0;
    cursor: default;
    display: none;
}
.notification_progress {
    width: 0;
    height: 4px;
    position: absolute;
    bottom: 5px;
    left: 2%;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05), 0 -1px 0 rgba(127,127,127,0.6);
    border-radius: 3px;
}
@keyframes notification_fadeout {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; transform: translateY(0px);}
    99% { opacity: 0; transform: translateY(-30px);}
    100% { opacity: 0; }
}
@keyframes notification_progress_run {
    0% { width: 0%; background: rgba(127,127,127,0.3); }
    100% { width: 96%; background: rgba(127,127,127,1); }
}
#show_notifications:checked ~ section .notification {
    display: block;
    animation: notification_fadeout 5s linear forwards;
}
#show_notifications:checked ~ section .notification .notification_progress {
    animation: notification_progress_run 4s linear forwards 0.5s;
}
#show_notifications:checked ~ section .notification:nth-child(2) {
	animation-duration: 6s;
	animation-delay: 0.2s;
}
#show_notifications:checked ~ section .notification:nth-child(2) .notification_progress {
	animation-duration: 5s;
	animation-delay: 0.7s;
}


/* Notes structure */
.info, .warning {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify;
    padding: var(--gap);
    gap: var(--gap);
}
.info:before, .warning:before {
    display: flex;
    align-items: center;
    font-size: 32px;
    line-height: 1;  /* Minimal height set to 100% of font size */
}
.info:before { content: 'ⓘ' }
.warning:before { content: '⚠' }


/* Mobile-only styles */
@media (max-width: 900px) {

    /* Show menu button, show/hide external content in-column */
    #header_menu { display: flex }
    #header_content {
        z-index: 1;
        position: absolute;
        width: 200px;
        top: calc(var(--controls-height) + var(--header-padding) + 1px + var(--gap)); /* relative to header */
        right: 0;
        flex-direction: column;
        transition: all var(--transition-speed) ease;

        /* Add themed style for external elements holder */
        background: var(--colorMainBg);
        color: var(--colorMain);
        border: 1px solid var(--colorMain);
        border-radius: var(--controls-radius);

        /* Hide content */
        opacity: 0;
        transform: translateY(-20px);
        pointer-events: none;
    }
    #header_menu_toggle:checked ~ #header_content {
        /* Show content */
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    #header_content form { flex-direction: column }
    #header_content form, #header_content form input, #header_content button { width: 100% }

    /* Tags as inline wrapping flex */
    #tags_group {
        display: flex;
        flex-wrap: wrap;
    }
    .tags_container { display: contents }
    .tags_line {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
    }
}

/* Desktop-only styles */
@media (min-width: 901px) {

    /* Hide menu button, permanent show internal content in-row */
    #header_menu { display: none }
    #header_content {
        width: auto;
        flex-direction: row;
        padding: 0;
        opacity: 1;
        pointer-events: auto;
    }
    #header_content form { flex-direction: row }

    /* Tags as grid with first right-aligned column */
    #tags_group {
        display: grid;
        grid-template-columns: auto 1fr;
    }
    .tags_container {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
        align-items: center;
    }
    .tags_line { display: contents }
    .tags_line h3 { text-align: right }
}
