/* 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;
    --light-main: #f4e6f3;
    --desat-main: #b99bb5;
    --red: rgb(255, 227, 232);
    --dark-red: rgb(167, 62, 62); 
    --form-margin: 16px;
    --table-padding: 6px;
    --palette-margin: calc(var(--form-margin) * 0.5);
}

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 {
    flex-direction: column;
    display: flex;
    gap: var(--form-margin);
    justify-content: center;
    max-width: 75%;
}

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

.form-grid {
    grid-template-columns: repeat(4, 1fr);
    --gap: var(--form-margin);
    gap: var(--gap);
    --border-colour: var(--medium-main);
    border-bottom: 1px dotted var(--border-colour);
    padding-bottom: var(--gap);
}

.form-grid:nth-last-of-type(2) {
    border-bottom: none;
    padding-bottom: 0;
}

#advanced > div {
    border-right: 1px dotted var(--border-colour);
}

#advanced > div:last-of-type {
    border-right: none;
    padding-bottom: none;
}

#form-inputs {
    justify-content: space-between;
}

.input-group {
    display: grid;
    grid-template-columns: 1.5fr min-content;
    gap: calc(var(--form-margin) * 0.5);
    align-items: start;
}

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

.input-group label, .input-group h4 {
    font-style: italic;
}

#advanced .input-group label {
    font-style: normal;
}

input, select {
    padding: 3px;
    background-color: var(--light-main);
    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"] {
    width: 3ch;
}

select {
    line-height: var(--font-size);
}

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

#prefer-lightness {
    grid-template-columns: repeat(auto-fit, minmax(100px, min-content));
    justify-content: center;
}

#prefer-lightness .input-group {
    width: min-content;
}

#exclude-list {
    max-height: 100px;
    overflow: scroll;
    font-size: small;
}

#exclude-list li {
    min-width: 21ch;
    list-style-type: none;
}

#exclude-list input, #exclude-list label {
    display: inline;
}

@media only screen and (max-width: 525px) {
    #form-inputs > :nth-child(3), #form-inputs > :last-child {
        grid-column: span 1;
    }

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

    .input-group {
        grid-template-columns: 1fr max-content;
    }

    #advanced > div {
        border-right: none;
        border-bottom: 1px dotted var(--border-colour);
        padding-bottom: var(--gap);
    }

    #advanced > div:last-of-type {
        border-bottom: none;
        padding-bottom: 0;
    }

    #exclude-list {
        max-height: none;
    }
}

.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;
}

.input-group.show-colour {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}

.colour-input.show-colour, .value {
    display: grid;
    align-items: start;
}

.colour-input.show-colour {
    grid-template-columns: 1fr 1fr;
}

.colour-input h3, .span-2 {
    grid-column: 1 / -1;
}

.colour-input h3, .form-heading {
    color: var(--medium-main);
    font-style: italic;
}

.colour-input h3 {
    text-align: center;
}

.value {
    gap: var(--table-padding);
    grid-template-columns: repeat(2, minmax(5ch, min-content));
}

.span-2 input, .span-2 label {
    display: inline;
}

.value input[type="checkbox"] {
    padding-left: 0;
    margin-left: 0;
    margin-right: var(--table-padding);
}

.colour-preview {
    height: calc(var(--line-height) * 1em);
    width: 64px;
}

.colour-preview.show-colour {
    border: 1px solid var(--gray);
}

#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: var(--form-margin);
}

#result {
    --gap: var(--form-margin);
    gap: var(--gap);
    align-items: start;
    justify-content: center;
    --font-size: 14px;
    --palette-size: 8ch;
    font-size: var(--font-size);
    margin: auto;
    max-width: 80vw;
}

#result.show {
    display: grid;
    border: 1px solid var(--medium-light-main);
    margin-bottom: var(--form-margin);
}

@media screen and (max-width: 1250px) {
    #result {   
        max-width: calc(100vw - var(--body-margin) * 2 - var(--padding) * 2);
    }
}

#result .explanation {
    grid-column: 1 / -1;
    width: 100%;
}

#result .explanation p {
    font-style: italic;
    max-width: 20ch;
    text-align: center;
    margin: auto;
}

.result-palette {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    gap: var(--table-padding);
    justify-content: center;
    margin: auto;
    border-bottom: 1px dashed var(--medium-light-main);
    padding-bottom: var(--gap);
}

.result-palette:last-child {
    border-bottom: none;
}

.palette-colour {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: calc(var(--palette-margin) * 0.5);
    --font-size: 10px;
    font-size: var(--font-size);
}

.palette-swatch {
    --size: max(40px, var(--palette-size));
    width: var(--size);
    height: var(--size);
    border-radius: var(--size);
}

.palette-colour p {
    line-height: var(--font-size);
    height: var(--font-size);
    border-bottom: 1px dotted var(--dark-main);
}