/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* stylesheet */

:root {
    --font-family: "georgia", serif;
    --body-margin: 2em;
    --font-size: 16px;
    --line-height: 1.25;
    --gray: #735673;
    --white: #fefbfe;
    --dark-main: #be7fb2;
    --medium-main: #d293cb;
    --medium-light-main: #e4cde7;
    --desat-main: #b99bb5;
    --red: rgb(255, 227, 232);
    --dark-red: rgb(167, 62, 62); 
    --form-margin: 16px;
    --table-padding: 6px;
    --table-head: #e5d3e9;
    --table-even: #f7eff8;
    --table-odd: #ede1ee;
    --table-gradation: 38;
    --table-offset: -25;
    --daily: calc(0 * var(--table-gradation) + var(--table-offset));
    --daily-even: oklch(from var(--table-even) l c calc(h + var(--daily)));
    --daily-odd: oklch(from var(--table-odd) l c calc(h + var(--daily)));
    --event: var(--daily) + var(--table-gradation);
    --event-even: oklch(from var(--table-even) l c calc(h + var(--event)));
    --event-odd: oklch(from var(--table-odd) l c calc(h + var(--event)));
    --timed: var(--event) + var(--table-gradation);
    --timed-even: oklch(from var(--table-even) l c calc(h + var(--timed)));
    --timed-odd: oklch(from var(--table-odd) l c calc(h + var(--timed)));
    --single: var(--timed) + var(--table-gradation);
    --single-even: oklch(from var(--table-even) l c calc(h + var(--single)));
    --single-odd: oklch(from var(--table-odd) l c calc(h + var(--single)));
}

body {
    margin: var(--body-margin);
    line-height: var(--line-height);
    color: var(--gray);
    background-color: var(--white);
    font-family: var(--font-family);
    font-weight: 400;
    font-style: normal;
    font-size: var(--font-size);
    overflow: auto;
}

main {
    display: grid;
    gap: var(--form-margin);
}

#intro {
    order: 1;
}
#form {
    order: 4;
}
#json-error {
    order: 2;
}
#result {
    order: 3;
}

h1 {
    font-family: "Homemade Apple", "georgia", serif;
    font-size: x-large;
    margin-bottom: calc((var(--line-height) * 1em * 0.5));
    color: var(--medium-main);
    border-bottom: 2px dotted var(--medium-light-main);
}

p+p {
    margin-top: var(--form-margin);
}

a, a:visited {
    color: var(--medium-light-main);
}

a:hover {
    color: var(--medium-main);
}

#form {
    max-width: 75%;
    flex-direction: column;
    display: flex;
    gap: var(--form-margin);
}

#form-inputs, .row {
    display: grid;
}

#form-inputs {
    display: grid;
    grid-template-columns: 0.4fr repeat(3, 1fr);
    gap: var(--form-margin);
}

#form-inputs > :nth-child(3) {
    grid-column: span 2;
}

#form-inputs > :last-child {
    grid-column: span 3;
}

.heading, .input-group {
    align-items: start;
}

.heading {
    display: flex;
}

.heading .note {
    font-weight: normal;
    font-style: italic;
}

.note {
    color: var(--desat-main);
}

h3 {
    color: var(--dark-main);
    font-weight: bold;
}

.input-group {
    display: flex;
    gap: calc(var(--form-margin) * 0.5);
}

.input-group label, .input-group input {
    display: block;
}

@media only screen and (max-width: 525px) {
    #form {
        max-width: none;
    }

    #form-inputs {
        grid-template-columns: repeat(auto-fit, minmax(150px, min-content));
    }

    #form-inputs > :nth-child(3), #form-inputs > :last-child {
        grid-column: span 1;
    }

    .input-group {
        align-items: start;
    }
}

input {
    padding: 3px;
    background-color: #F5E0F3;
    border: 1px solid var(--medium-light-main);
    color: var(--dark-main);
    font-family: "georgia", serif;
}

input:focus {
    outline: 2px solid var(--dark-main);
}

input[type="text"], input[type="date"] {
    width: 14ch;
}

input[type="checkbox"] {
    accent-color: var(--dark-main);
}

.invalid, #errors {
    background-color: var(--red);
}

#form-buttons {
    display: flex;
    gap: var(--form-margin);
    flex-wrap: wrap;
}

#form-buttons input {
    padding: calc((var(--form-margin) * 0.25));
}

#errors {
    padding: calc(var(--form-margin) * 0.5);
}

ul {
    margin-left: 1em;
    list-style-type: disc;
}

ul li::marker {
    color: var(--medium-main);
}

strong {
    font-weight: bold;
    color: var(--medium-main);
}

em {
    font-style: italic;
}

.resource-img {
    height: calc(var(--font-size) * (var(--line-height) + 0.1));
    vertical-align: bottom;
}

.hide {
    display: none;
}

.show {
    display: block;
}

#json-error.show, .invalid, #errors.show {
    border: 1px solid var(--dark-red);
}

#json-error.show, #result.show {
    --padding: var(--form-margin);
    padding: var(--padding);
    scroll-margin-top: calc(var(--padding) + 10px);
}

#result {
    gap: var(--form-margin);
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;
    --font-size: 14px;
    font-size: var(--font-size);
    width: max-content;
    margin: auto;
}

#result.show {
    display: flex;
    border: 1px solid var(--dark-main);
}

@media screen and (max-width: 1250px) {
    #result {
        width: min-content;
    }
}

#result th, #result td {
    padding: var(--table-padding);
    text-align: center;
}

#result th, #result td, #result tbody .resource-img {
    vertical-align: middle;
}

#result tbody .resource-img {
    margin-bottom: 2px;
}

#result tr > :nth-child(1) {
    width: 25ch;
}

#result th {
    font-weight: bold;
    background-color: var(--table-head);
}

.tier-sorted .first td {
    --border-darkness: -0.05;
    --border-chroma: 0.01;
    --border-colour: oklch(from var(--background)
        calc(l + var(--border-darkness))
        calc(c + var(--border-chroma)) h);
    border-top: 2px solid var(--border-colour);
}

#result tbody tr:nth-child(odd) {
    background-color: var(--table-odd);
}
#result tbody tr:nth-child(even) {
    background-color: var(--table-even);
}

#result tbody tr:nth-child(odd).daily {
    background-color: var(--daily-odd);
}
#result tbody tr:nth-child(even).daily {
    background-color: var(--daily-even);
}
.daily {
    --background: var(--daily-odd);
}

#result tbody tr:nth-child(odd).event {
    background-color: var(--event-odd);
}
#result tbody tr:nth-child(even).event {
    background-color: var(--event-even);
}
.event {
    --background: var(--event-odd);
}

#result tbody tr:nth-child(odd).timed {
    background-color: var(--timed-odd);
}
#result tbody tr:nth-child(even).timed {
    background-color: var(--timed-even);
}
.timed {
    --background: var(--timed-odd);
}

#result tbody tr:nth-child(odd).single {
    background-color: var(--single-odd);
}
#result tbody tr:nth-child(even).single {
    background-color: var(--single-even);
}
.single {
    --background: var(--single-odd);
}

#legend, .legend-entry {
    display: flex;
    --gap: var(--form-margin);
    align-items: center;
    justify-content: start;
}

#legend {
    flex-wrap: wrap;
    margin-top: var(--table-padding);
    gap: var(--gap);
}

.legend-entry {
    gap: calc(var(--gap) * 0.5);
}

.legend-colour {
    width: var(--font-size);
    height: var(--font-size);
    border: 1px solid var(--border-colour);
    background-color: var(--background);
    --border-darkness: -0.1;
    --border-chroma: 0.01;
    --border-colour: oklch(from var(--background)
        calc(l + var(--border-darkness))
        calc(c + var(--border-chroma)) h);
}

#day-diff {
    text-align: center;
    margin-top: var(--form-margin);
    font-style: italic;
    font-size: 1.2em;
}

.sort-button {
    margin-left: 2px;
    padding: 0;
    background: none;
    border: none;
    outline: none;
    font: var(--font-family);
    font-size: 0.8em;
}

.sort-button img {
    width: var(--font-size);
    height: var(--font-size);
    filter: invert(93%) sepia(23%) saturate(2663%) hue-rotate(222deg) brightness(88%) contrast(83%);
    vertical-align: top;
}

.sort-button img:hover {
    filter: invert(78%) sepia(96%) saturate(1297%) hue-rotate(275deg) brightness(82%) contrast(76%);
}