@charset "UTF-8";

/* Shopping list.

   DELIBERATELY PLAIN CSS -- do not modernise this file.

   views/mail-layout.erb inlines it verbatim into the <style> block of the
   outgoing shopping-list email, so its target is mail clients, not browsers.
   That rules out cascade layers, native nesting, custom properties, oklch()
   and color-mix(): Gmail, Outlook and friends variously strip or choke on all
   of them, and a stripped custom property leaves text with no colour at all.
   Hence literal hex values, physical properties and flat selectors.

   The browser copy is the same file, linked from views/layout.erb. */


.shopping-list {
    max-width: 80ex;
    margin: 1ex auto;
}

.shopping-list .title span {
    text-align: left;
}


/* Recipes the list was built from */

.shopping-list table.recipes-summary {
    width: 100%;
    border-collapse: collapse;
    color: #002b36;
    background-color: #fdf6e3;
}

@media screen {
    .shopping-list table.recipes-summary {
        border: 1px solid rgba(0, 0, 0, 0.3);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
}

.shopping-list table.recipes-summary thead {
    color: #859900;
    background-color: #002b36;
}

.shopping-list table.recipes-summary a {
    display: block;
    color: #002b36;
    text-decoration: none;
}

.shopping-list table.recipes-summary a:hover {
    text-decoration: underline;
}

.shopping-list table.recipes-summary th,
.shopping-list table.recipes-summary td {
    vertical-align: top;
}

.shopping-list table.recipes-summary th:nth-child(1),
.shopping-list table.recipes-summary td:nth-child(1) {
    width: 3ex;
    padding: 0.5ex 1ex;
    text-align: right;
}

.shopping-list table.recipes-summary th:nth-child(2),
.shopping-list table.recipes-summary td:nth-child(2) {
    padding: 0.5ex 1ex;
    text-align: left;
}


/* The list itself */

.shopping-list .ingredients-list {
    background-color: #93a1a1;
}

@media screen {
    .shopping-list .ingredients-list {
        border: 1px solid rgba(0, 0, 0, 0.3);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
}

/* Packaging markers: hidden by default, revealed one at a time by the
   attribute value, each in its own colour. */
.shopping-list .ingredients-list [data-packaging] {
    display: none;
}

.shopping-list .ingredients-list [data-packaging="frozen"] {
    display: inline;
    color: #268bd2;
}

.shopping-list .ingredients-list [data-packaging="canned"] {
    display: inline;
    color: #b58900;
}

.shopping-list .ingredients-list [data-packaging="jar"] {
    display: inline;
    color: #cb4b16;
}

.shopping-list .ingredients-list dt {
    padding: 0.5ex 1ex;
    font-size: 150%;
    background-color: white;
}

.shopping-list .ingredients-list ul {
    margin-bottom: 1em;
    padding: 0;
}

/* min-height, not height: a fixed height clips the row as soon as the
   reader raises line-height or text size. Same rendering otherwise. */
.shopping-list .ingredients-list li {
    display: flex;
    align-items: center;
    margin: 5px 0;
    min-height: 2em;
}

.shopping-list .ingredients-list li.odd  { background-color: #eee8d5; }
.shopping-list .ingredients-list li.even { background-color: #fdf6e3; }

.shopping-list .ingredients-list .ingredient-name {
    flex-grow: 1;
    color: #002b36;
}

.shopping-list .ingredients-list .ingredient-name input {
    margin: 0 1ex;
}

/* Ticked off: struck through, and the checkbox itself carries the state,
   so the meaning does not rest on the line alone. */
.shopping-list .ingredients-list .ingredient-name input:checked + span {
    text-decoration: line-through;
}

.shopping-list .ingredients-list .quantity-list {
    display: inline-flex;
}

.shopping-list .ingredients-list .ingredient-quantity {
    padding: 0.3ex 1ex;
    color: #cb4b16;
    border-right: 1px solid grey;
}

.shopping-list .ingredients-list .ingredient-quantity:last-of-type {
    border-right: none;
}


@media (max-width: 410px) {
    .shopping-list {
        font-size: 12px;
    }

    .shopping-list .ingredients-list dd {
        margin-left: 1ex;
    }
}