@import url("fonts.css");

/* Global elements */

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    color-scheme: light dark;
}

body {
    font-family: "Hepta Slab", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    background: light-dark(#f1f0f5, hsl(252 20% 5% / 1));
    color: light-dark(black, white);
}

.wrapper {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

/* Random elements */

hr {
    border-top: 3px double light-dark(black, white);
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
}

button {
    cursor: pointer;
}


form.inline {
    display: inline;
}

/* Semantic page layout elements */
header details {
    color: light-dark(black, white);
    font-size: 0.7rem;

    summary {
        color: light-dark(black, white);
        font-size: 1rem;
    }
}

footer {
    margin-top: 2rem;
    font-style: italic;
    color: light-dark(dimgray, rgb(202, 202, 202));
    font-size: 0.7rem;
}


article {

    box-sizing: border-box;

    filter: drop-shadow(3px 5px 5px light-dark(lightgray, hsl(250 15% 0% / 1)));
}

.card-body {
    mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 24px 100%;
}

.is-loading::after {
    content: "◌";
    animation: 4s linear 0s infinite running spinner, 0.25s ease-in 0s 1 running fade-in;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

task-item {
    --font: "Shantell Sans", cursive;
}

/* Page styling */

article {
    flex-direction: column;
    display: flex;
}

.card-head {
    --rule-start: 2rem;
    --text-start: .3rem;
    --line-height: calc(2.6rem + 2px);

    height: 3.9rem;
    padding-top: 1.3rem;
    background-position: 0px -2px;

}

.ruled {
    --rule-color: light-dark(#abced4, #c86363);

    /* https://projects.verou.me/css3patterns/#lined-paper */
    background-color: light-dark(white, #141414);
    background-image:
        linear-gradient(90deg,
            transparent var(--rule-start),
            var(--rule-color) var(--rule-start),
            var(--rule-color) calc(var(--rule-start) + 2px),
            transparent calc(var(--rule-start) + 2px)),
        linear-gradient(light-dark(#eee, #333) 2px, transparent 2px);
    background-size: 100% var(--line-height);
}

.card-head .headercontainer {
    margin-left: calc(var(--text-start) + var(--rule-start));
    gap: .5em;
}

.card-head .headercontainer button {
    background: 0;
    border: 0;
    margin: -2px 0 0;
    padding: 0;
    font-size: 32px;
    line-height: 1.3;
    text-decoration: underline;
}

.card-head .headercontainer button:before,
.card-head .headercontainer button:after {
    content: "";
    width: 0;
    height: 0;
    display: block;
}

.card-head .headercontainer button:before {
    margin-bottom: -.3em;
}

.card-head .headercontainer button:after {
    margin-top: -.3em;
}

.card-head .headercontainer button:not([active]) {
    color: gray;
    font-style: italic;
}

.card-head .headercontainer {
    display: inline-flex;
}

.card {
    --rule-start: 2rem;
    --text-start: .3rem;
    --line-height: 21px;
    height: 42px;
    position: relative;
}

.card li,
.card label,
.card form.addtodo button {
    margin: 2px 0 -2px;
    font-size: 16px;
}

.card button {
    cursor: pointer;
}

.card p,
.card form.addtodo {
    margin: 0;
    margin-left: calc(var(--text-start) + var(--rule-start));
    flex-direction: row;
    align-items: baseline;
    gap: .5rem;
    margin-top: 2px;
    display: flex;
}

.card autowidth-input {
    min-width: 5.8ch;
    max-width: 17ch;
    margin: 2px 0 -2px;
    font-size: 16px;
}

.card button,
.card input,
.card form:not(.addtodo) {
    background: 0;
    border: 0;
    margin: 0;
    padding: 0;
}

.card-body {
    --rule-start: 2rem;
    --text-start: .3rem;
    --line-height: 100%;
    background-repeat: no-repeat;
    padding-top: 4px;
    padding-bottom: 17px;
}

.card-body ul {
    flex-direction: column;
    margin: 0;
    padding: 0;
    display: flex;
}

.card-head,
.card-head input,
.card-head button,
.card,
.card input,
.card button,
.card-body,
.card-body input,
.card-body button {
    font-optical-sizing: auto;
    font-variation-settings: "BNCE" 0, "INFM" 0, "SPAC" 0;
    font-synthesis: none;
    font-family: Shantell Sans, cursive;
    font-style: normal;
    font-weight: 400;
}

.card-head select,
.card-head button,
.card select,
.card button,
.card-body select,
.card-body button {
    color: light-dark(#000, #fff);
}