/* THE RECIPE SHELF (Steven 2026-10-03). The cards themselves are the Want
   Market's long rows (.toll-row in shop.css); this file only adds the price,
   the certification line and the item/order page. Design tokens only. */

.recipe-row__price {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    white-space: nowrap;
}
.recipe-row__testing {
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.toll-row--recipe a.toll-row__btn--soft { cursor: pointer; }

/* ── /recipes pages ── */
.recipes-page .recipes-main {
    place-items: start stretch;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
.recipes-wrap,
.recipes-wrap * { box-sizing: border-box; }
.recipes-wrap {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.recipes-fineprint {
    margin: var(--space-4) 0 var(--space-6);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.recipe-item { display: grid; gap: var(--space-4); padding-bottom: var(--space-6); }
.recipe-item__back {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
}
.recipe-item__head { display: grid; gap: var(--space-2); justify-items: start; }
.recipe-item__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold, 800);
    line-height: 1.1;
    color: var(--text-primary);
}
.recipe-item__pitch { margin: 0; font-size: var(--text-base); color: var(--text-primary); }
.recipe-item__price { margin: 0; font-size: var(--text-base); color: var(--text-muted); }
.recipe-item__price strong {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    color: var(--text-primary);
    margin-right: var(--space-2);
}
.recipe-item__by { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.recipe-item__card {
    padding: var(--space-4);
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
    border-radius: var(--radius-lg);
    box-shadow: var(--shop-card-shadow, 0 1px 3px rgba(0,0,0,0.06));
    display: grid;
    gap: var(--space-3);
}
.recipe-item__card--quiet { background: transparent; box-shadow: none; }
.recipe-item__h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}
.recipe-item__list { margin: 0; padding-left: var(--space-4); display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--text-primary); }
.recipe-item__soon { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

.recipe-form { display: grid; gap: var(--space-3); }
.recipe-form__field { display: grid; gap: var(--space-1); }
.recipe-form__label { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--text-primary); }
.recipe-form__label em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.recipe-form__input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: var(--radius-md);
}
.recipe-form__help { font-size: var(--text-xs); color: var(--text-muted); }
.recipe-form__problem { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--text-primary); }
.recipe-form__submit { justify-self: start; border: 0; cursor: pointer; }
.recipe-form__submit--plain { border: 1px solid var(--border-subtle, rgba(0,0,0,0.08)); }
.recipe-form__note { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }

.recipe-order__audio { width: 100%; }
.recipe-order__lyrics {
    margin: 0;
    white-space: pre-wrap;
    font-family: var(--font-serif, Georgia, serif);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.recipe-form__field[hidden] { display: none; }
.recipe-form__area { resize: vertical; min-height: 6rem; }
.recipe-form__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.recipe-form__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.recipe-form__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-primary);
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: var(--radius-md);
}
.recipe-take { display: grid; gap: var(--space-3); }
.recipe-take--picked { border: 1px solid var(--border-subtle, rgba(0,0,0,0.08)); }
.recipe-take__picked { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--text-primary); }

/* Free while a recipe is being certified: the words stand where the price was. */
.recipe-row__price--free {
    max-width: 11rem;
    white-space: normal;
    text-align: right;
    font-size: var(--text-xs);
    line-height: 1.25;
}
.recipe-item__price--free strong { font-size: var(--text-xl); display: block; margin: 0 0 var(--space-1); }

/* Phones: the shell rail leaves too little width for the tagline pill beside
   the wordmark and the Shop / Want / Menu pill, so only the pill steps aside. */
@media (max-width: 520px) {
  .recipes-page .market-brand__tagstack { display: none; }
}