html {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
                 "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
                 sans-serif;
    font-weight: 300;
    -webkit-text-size-adjust: none;

    --color-text: rgb(0, 0, 0);
    --color-text-light: rgb(142, 142, 147);
    --color-blue: rgb(0, 136, 255);
    --color-border: rgb(204, 204, 204);
    --color-recipe-border: rgb(27, 173, 248);
    --color-recipe-background: rgb(210, 235, 254);
    --color-background: rgb(255, 255, 255);
    --color-background-alt: rgb(228, 228, 228);
}

@media (prefers-color-scheme: dark) {
    html {
        --color-text: rgb(255, 255, 255);
        --color-blue: rgb(0, 145, 255);
        --color-border: rgb(0, 0, 0);
        --color-recipe-border: rgb(27, 173, 248);
        --color-recipe-background: rgb(32, 57, 77);
        --color-background: rgb(30, 30, 30);
        --color-background-alt: rgb(55, 55, 55);
    }
}

/* ---------- GRID OF BUTTONS ---------- */
html {
    font-size: 16px;
    color: var(--color-text);
    background-color: var(--color-background);
}

h1 {
    font-size: 2rem;
}

h2 {
    color: var(--color-text);
}

.controls {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 1rem;
    align-items: center;
    margin: 1rem 0.5rem;
    max-width: 300px;
}

.controls input:not([type=checkbox]),
.controls select {
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.2rem;
}

.controls button {
    cursor: pointer;
}

.controls button:has(:is(label, a)) {
    padding: 0;
}

.controls button > :is(label, a) {
    display: block;
    padding: 2px 6px 3px 6px;
    cursor: pointer;
    color: buttontext;
}

.controls button > a {
    color: buttontext;
    text-decoration: none;
}

.controls input[type=file] {
    display: none;
}

.controls label:has(+ input[type=checkbox]),
.controls input[type=checkbox] {
    cursor: pointer;
}

.recipes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-flow: row dense;
    gap: 20px;
}

.recipe-toggle {
    display: flex;
    flex-flow: column;
    align-items: center;

    border: 1px solid var(--color-recipe-border);

    background-color: var(--color-recipe-background);
    border-radius: 5px;
    box-shadow: 0 0.3rem 0.5rem 0.2rem rgba(0,0,0,0.1);
    cursor: pointer;
}

.recipe-toggle h2 {
    flex: 1;
    font-size: 1.2rem;
}

.recipe-toggle img {
    width: 100%;
}

.recipe {
    grid-column: 1 / -1;
}

.recipe-content {
    position: relative;
    width: 100%;
    min-height: 10rem;
}

.recipe-options-toggle {
    display: inline-block;
    margin-left: 0.2rem;
    border: 1px solid var(--color-text-light);
    padding: 0 0.4rem;
    width: 1.5rem;
    background-color: var(--color-recipe-background);
    position: relative;

    color: var(--color-text-light);
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
}

.recipe-options-toggle:before {
    position: absolute;
    font-size: 1.5rem;
    left: 0.2rem;
    top: -0.4rem;
    content: '\2261';
}

.recipe-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    padding: 0.5rem;

    font-size: 1.25rem;
    color: var(--color-text);
    background-color: var(--color-recipe-background);
}

.recipe-options a {
    text-decoration: none;
    color: var(--color-blue);
}

.recipe-options > * {
    display: flex;
    align-items: center;
}

.recipe-options > label {
    gap: 0.5rem;
}

.recipe-options label,
.recipe-options input,
.recipe-options button {
    cursor: pointer;
}

.recipe-options-move {
    display: none;
}

.recipe-options:has([name=recipe-favorite]:checked) .recipe-options-move {
    display: flex;
}

.recipe-options label input[type=checkbox] {
    margin-left: 0.25rem;
}

.recipe-options-move > * {
    height: 1.75rem;
    padding: 0 0.5rem;
    border: 1px solid var(--color-border);
    border-right-width: 0;
    background-color: var(--color-background-alt);
    font-size: 1rem;
    color: var(--color-text);
}

.recipe-options .recipe-options-move-left {
    border-radius: 0.5rem 0 0 0.5rem;
}
.recipe-options .recipe-options-move-right {
    border-right-width: 1px;
    border-radius: 0 0.5rem 0.5rem 0;
}

@media (max-width: 640px) {
    .recipes {
        font-size: 10px;
        gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        margin: 5px;
    }
}

/* ---------- RECIPE GRID ---------- */

.grid, .grid > div {
    border-color: var(--color-border);
    border-style: solid;
}

.grid {
    display: grid;
    border-width: 0 1px 1px 0;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.grid > div {
    border-width: 1px 0 0 1px;
    padding: 4px;
}

.start {
    grid-column-start: 1;
    background-color: var(--color-background);
}

.start-odd {
    background-color: var(--color-background-alt);
}

.hidden {
    display: none;
}

/* ---------- GRID SHORTHAND ---------- */

.grid-2  { grid-template-columns: minmax(max-content, 1fr) repeat( 1, 1fr); }
.grid-3  { grid-template-columns: minmax(max-content, 1fr) repeat( 2, 1fr); }
.grid-4  { grid-template-columns: minmax(max-content, 1fr) repeat( 3, 1fr); }
.grid-5  { grid-template-columns: minmax(max-content, 1fr) repeat( 4, 1fr); }
.grid-6  { grid-template-columns: minmax(max-content, 1fr) repeat( 5, 1fr); }
.grid-7  { grid-template-columns: minmax(max-content, 1fr) repeat( 6, 1fr); }
.grid-8  { grid-template-columns: minmax(max-content, 1fr) repeat( 7, 1fr); }
.grid-9  { grid-template-columns: minmax(max-content, 1fr) repeat( 8, 1fr); }
.grid-10 { grid-template-columns: minmax(max-content, 1fr) repeat( 9, 1fr); }
.grid-11 { grid-template-columns: minmax(max-content, 1fr) repeat(10, 1fr); }
.grid-12 { grid-template-columns: minmax(max-content, 1fr) repeat(11, 1fr); }
.grid-13 { grid-template-columns: minmax(max-content, 1fr) repeat(12, 1fr); }
.grid-14 { grid-template-columns: minmax(max-content, 1fr) repeat(13, 1fr); }
.grid-15 { grid-template-columns: minmax(max-content, 1fr) repeat(14, 1fr); }
.grid-16 { grid-template-columns: minmax(max-content, 1fr) repeat(15, 1fr); }
.grid-17 { grid-template-columns: minmax(max-content, 1fr) repeat(16, 1fr); }
.grid-18 { grid-template-columns: minmax(max-content, 1fr) repeat(17, 1fr); }
.grid-19 { grid-template-columns: minmax(max-content, 1fr) repeat(18, 1fr); }
.grid-20 { grid-template-columns: minmax(max-content, 1fr) repeat(19, 1fr); }
.grid-21 { grid-template-columns: minmax(max-content, 1fr) repeat(20, 1fr); }
.grid-22 { grid-template-columns: minmax(max-content, 1fr) repeat(21, 1fr); }
.grid-23 { grid-template-columns: minmax(max-content, 1fr) repeat(22, 1fr); }
.grid-24 { grid-template-columns: minmax(max-content, 1fr) repeat(23, 1fr); }
.grid-25 { grid-template-columns: minmax(max-content, 1fr) repeat(24, 1fr); }
.grid-26 { grid-template-columns: minmax(max-content, 1fr) repeat(25, 1fr); }
.grid-27 { grid-template-columns: minmax(max-content, 1fr) repeat(26, 1fr); }
.grid-28 { grid-template-columns: minmax(max-content, 1fr) repeat(27, 1fr); }
.grid-29 { grid-template-columns: minmax(max-content, 1fr) repeat(28, 1fr); }
.grid-30 { grid-template-columns: minmax(max-content, 1fr) repeat(29, 1fr); }

.grid >  [data-add="2"] { grid-row: span  2; }
.grid >  [data-add="3"] { grid-row: span  3; }
.grid >  [data-add="4"] { grid-row: span  4; }
.grid >  [data-add="5"] { grid-row: span  5; }
.grid >  [data-add="6"] { grid-row: span  6; }
.grid >  [data-add="7"] { grid-row: span  7; }
.grid >  [data-add="8"] { grid-row: span  8; }
.grid >  [data-add="9"] { grid-row: span  9; }
.grid > [data-add="10"] { grid-row: span 10; }
.grid > [data-add="11"] { grid-row: span 11; }
.grid > [data-add="12"] { grid-row: span 12; }
.grid > [data-add="13"] { grid-row: span 13; }
.grid > [data-add="14"] { grid-row: span 14; }
.grid > [data-add="15"] { grid-row: span 15; }
.grid > [data-add="16"] { grid-row: span 16; }
.grid > [data-add="17"] { grid-row: span 17; }
.grid > [data-add="18"] { grid-row: span 18; }
.grid > [data-add="19"] { grid-row: span 19; }
.grid > [data-add="20"] { grid-row: span 20; }
.grid > [data-add="21"] { grid-row: span 21; }
.grid > [data-add="22"] { grid-row: span 22; }
.grid > [data-add="23"] { grid-row: span 23; }
.grid > [data-add="24"] { grid-row: span 24; }
.grid > [data-add="25"] { grid-row: span 25; }
.grid > [data-add="26"] { grid-row: span 26; }
.grid > [data-add="27"] { grid-row: span 27; }
.grid > [data-add="28"] { grid-row: span 28; }
.grid > [data-add="29"] { grid-row: span 29; }

.grid > .c2  { grid-column: span  2; }
.grid > .c3  { grid-column: span  3; }
.grid > .c4  { grid-column: span  4; }
.grid > .c5  { grid-column: span  5; }
.grid > .c6  { grid-column: span  6; }
.grid > .c7  { grid-column: span  7; }
.grid > .c8  { grid-column: span  8; }
.grid > .c9  { grid-column: span  9; }
.grid > .c10 { grid-column: span 10; }
.grid > .c11 { grid-column: span 11; }
.grid > .c12 { grid-column: span 12; }
.grid > .c13 { grid-column: span 13; }
.grid > .c14 { grid-column: span 14; }
.grid > .c15 { grid-column: span 15; }
.grid > .c16 { grid-column: span 16; }
.grid > .c17 { grid-column: span 17; }
.grid > .c18 { grid-column: span 18; }
.grid > .c19 { grid-column: span 19; }
.grid > .c20 { grid-column: span 20; }
.grid > .c21 { grid-column: span 21; }
.grid > .c22 { grid-column: span 22; }
.grid > .c23 { grid-column: span 23; }
.grid > .c24 { grid-column: span 24; }
.grid > .c25 { grid-column: span 25; }
.grid > .c26 { grid-column: span 26; }
.grid > .c27 { grid-column: span 27; }
.grid > .c28 { grid-column: span 28; }
.grid > .c29 { grid-column: span 29; }