:root {
    --lightred: hsla(14, 92%, 54%, .1);
    --red: hsla(14, 92%, 54%, 1);
    --lightyellow: hsla(42, 100%, 50%, .1);
    --yellow: hsla(42, 100%, 50%, 1);
    --lightblue: hsla(198, 100%, 46%, .1);
    --blue: hsla(198, 100%, 46%, 1);
    --lightgreen: hsla(79, 100%, 36%, .1);
    --green: hsla(79, 100%, 36%, 1);
    --light: hsla(214, 73%, 19%, .1);
    --dark: hsla(214, 73%, 19%, 1);
}

#clear { color: var(--light); }

.tiles {
    margin-bottom: 3rem;
}

.tiles article {
    display: inline-block;
    padding: .2rem .5rem;
    margin: .1rem .2rem;
    font-size: 90%;
    white-space: nowrap;
    background: var(--light);
    border: 1px solid var(--dark);
    border-radius: 4px;
}
.tiles article .add, .tiles article .remove {
    border-radius: 4px;
    width: 1rem;
    border: 1px black solid;
    display: inline-block;
    text-align: center;
    padding: 0 0.4rem;
    margin-left: 0.4rem;
}

.tiles article.available .add { display: none; }
.tiles article:not(.available) .remove { display: none; }

.tiles article.possible {   border-color: var(--green);                     background-color: var(--lightgreen) }
.tiles article.active {     border-color: var(--blue);                      background-color: var(--lightblue) }

.tiles article.needed {     border-color: var(--blue); color: var(--blue);  background-color: var(--lightred) }
.tiles article.missing {    border-color: var(--red);                       background-color: var(--lightred) }

.tiles article.available {  border-color: var(--green);                     background-color: var(--lightgreen) }


.tiles article.active { background: repeating-linear-gradient( 45deg, var(--light), var(--light) 10px, var(--lightblue) 10px, var(--lightblue) 20px ); }

.tiles article.active.possible { background: repeating-linear-gradient( 45deg, var(--lightgreen), var(--lightgreen) 10px, var(--lightblue) 10px, var(--lightblue) 20px ); }

.tiles article.selected { border-color: var(--blue); color: var(--blue); background: var(--lightblue); text-decoration: underline }
.tiles article.selected.possible { background: repeating-linear-gradient( 45deg, var(--lightgreen), var(--lightgreen) 10px, var(--lightblue) 10px, var(--lightblue) 20px ); }


#recipe .list em {
    display: inline-block;
}



.tabheader {
    border-bottom: 1px solid var(--dark);
    text-align: center;
    margin-bottom: 1rem;
}
.tabheader article {
    display: inline-block;
    padding: .4rem .9rem;
    margin: .1rem .2rem 0;
    font-size: 90%;
    white-space: nowrap;
    background: var(--lightyellow);
    border: 1px solid var(--dark);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
}
.tabheader article.active {
    background: repeating-linear-gradient( 45deg, var(--lightyellow), var(--lightyellow) 10px, var(--lightblue) 10px, var(--lightblue) 20px );
}

@media (min-width: 550px) { /* larger than phablet, grid */
    .tabheader {
        display: none;
    }
}
@media (max-width: 549px) { /* smaller than phablet, no grid */
    .tab.recipe {
        display: none;
    }
}