/* Mobile first: a handful of rules on top of Pico. */
header nav { flex-wrap: wrap; }
header nav ul { flex-wrap: wrap; }
header nav li { padding: .25rem .5rem; }
header nav form { margin: 0; }
.nav-logout { background: none; border: 0; padding: 0; min-height: 0; color: var(--pico-primary); }
#rating form { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
#rating button { flex: 1; margin: 0; font-size: 1.5rem; padding: .25rem; }
.msg { padding: .5rem 1rem; margin-bottom: 1rem; }
.key { font-family: monospace; word-break: break-all; }
button, input, select { min-height: 2.75rem; }

.recipe-thumb { width: 5rem; height: 5rem; object-fit: cover; border-radius: .5rem; float: left; margin-right: 1rem; }
.ing-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0; }
.ing-row input[type="text"], .ing-row select { width: auto; margin-bottom: 0; }
.cook-title { font-size: 1.2rem; }
.cook-step { font-size: 1.8rem; line-height: 1.4; min-height: 40vh; }
.cook-progress { font-weight: bold; }
.cook-nav { display: flex; gap: 1rem; position: sticky; bottom: 0; padding: .5rem 0; background: var(--pico-background-color); }
.cook-nav a { flex: 1; text-align: center; font-size: 1.2rem; padding: 1rem; }


/* Plan */
.plan-weeknav { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.plan-day { padding: .75rem; margin-bottom: .75rem; }
.plan-day form { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.plan-day form select { flex: 1 1 8rem; }
.plan-day form input { width: 5rem; }
.plan-today { border-left: .25rem solid var(--pico-primary); }
.plan-empty { color: var(--pico-muted-color); }

/* Shopping */
.shop-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.shop-add p { margin: 0; flex: 1 1 7rem; }
.shop-item { margin: 0 0 .4rem; }
.shop-toggle { display: flex; align-items: center; gap: .75rem; width: 100%;
  text-align: left; background: none; color: inherit; border: 1px solid var(--pico-muted-border-color); }
.shop-box { flex: 0 0 1.5rem; height: 1.5rem; border: 2px solid currentColor; text-align: center; line-height: 1.2rem; }
.shop-name { flex: 1 1 auto; }
.shop-done .shop-toggle { color: var(--pico-muted-color); text-decoration: line-through; }
.shop-del { margin: 0 0 .75rem; }
.shop-mode .shop-toggle { font-size: 1.25rem; padding: 1rem; }
.shop-mode .shop-toggle .shop-box { order: 3; }