/* The recipe book (DECISIONS #84), on top of /site/tapas.css. A recipe page reads like a cookbook
   page: the title, the facts and the photo up top, then ingredients in a column that stays put
   beside the steps on a wide screen, ingredients first on a phone. Print gives you only the recipe. */

/* ---- cards: index, hubs, related ---- */
.rb-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
/* A card has an edge (NYT Cooking's: a 1px hairline and a 4px corner), so the photo never floats on
   the page: the photo runs to the card's edges and the words sit inside it. */
.rb-card a {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding-bottom: 14px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); overflow: hidden;
}
.rb-card a > :not(.rb-card-img) { padding-inline: 14px; }
.rb-card-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-sunk); margin-bottom: 10px; }
.rb-card-img img { width: 100%; height: 100%; object-fit: cover; }
.rb-card-emoji { display: grid; place-items: center; height: 100%; font-size: 64px; background: var(--accent-wash-2); }
.rb-card-title { font: 600 var(--type-md); text-wrap: pretty; }
.rb-card-meta { font: 400 var(--type-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rb-card a:hover .rb-card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(26, 20, 22, 0.35); }
@media (min-width: 1101px) {
  /* One column count for every section at a width: four, so card sizes never jump between sections. */
  .rb-cards.rb-cols-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rb-cards.rb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) { .rb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .rb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rb-card a > :not(.rb-card-img) { padding-inline: 10px; }
}

/* ---- index and hubs ---- */
.rb-search { margin-top: var(--s5); max-width: 520px; }
.rb-search input {
  width: 100%; height: 48px; padding: 0 16px 0 44px; border-radius: var(--r-input);
  border: 1px solid var(--line-strong); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23766A6E' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m12.5 12.5 4 4'/%3E%3C/svg%3E") no-repeat 16px center;
  font: 400 var(--type-md); color: var(--ink); -webkit-appearance: none; appearance: none;
}
.rb-search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.rb-browse { display: grid; gap: 14px; margin: 0 0 var(--s8); }
.rb-browse-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; }
.rb-browse-row h2 { font: 600 var(--type-sm); padding-top: 8px; color: var(--ink-2); }
.rb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-count { margin-left: 8px; color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 500; }
.tc-chip[aria-current="page"] .rb-count { color: inherit; opacity: 0.7; }
@media (max-width: 700px) {
  .rb-browse { gap: 18px; }
  .rb-browse-row { grid-template-columns: 1fr; gap: 8px; }
  .rb-browse-row h2 { padding-top: 0; }
  /* On a phone each row scrolls sideways rather than stacking into a wall of chips. */
  .rb-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .rb-chips::-webkit-scrollbar { display: none; }
  .rb-chips .tc-chip { white-space: nowrap; }
}
.rb-none { margin: 0 0 var(--s6); color: var(--ink-2); }
.rb-course { margin-top: var(--s8); }
.rb-course:first-of-type { margin-top: 0; }
.rb-course-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: var(--s5); padding-top: 14px; border-top: 3px solid var(--ink); }
.rb-course-head h2 a { text-decoration: none; }
.rb-course-head h2 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.rb-az-wrap { margin-top: var(--s9); padding-top: var(--s5); border-top: 1px solid var(--line); }
.rb-az { list-style: none; margin: var(--s5) 0 0; padding: 0; columns: 4 220px; column-gap: 32px; }
.rb-az li { break-inside: avoid; padding: 5px 0; font: 400 var(--type-md); }
.rb-az a { color: var(--ink); text-decoration: none; }
.rb-az a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rb-total { margin-top: var(--s4); }
.rb-elsewhere { margin-top: var(--s9); padding-top: var(--s6); border-top: 1px solid var(--line); }
.rb-elsewhere .rb-browse { margin-bottom: var(--s5); }
.rb-all { margin: 0; }
.rb-appcard { margin-top: var(--s9); }

/* ---- recipe ---- */
.rb-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: var(--s7); align-items: start; }
.rb-intro .tc-crumbs { margin-bottom: var(--s5); }
.rb-intro h1 { font: 700 var(--type-3xl); letter-spacing: -0.02em; }
.rb-by { margin-top: 14px; font: 500 var(--type-sm); color: var(--ink-2); }
.rb-by .tested { color: var(--live); }
/* The five facts in one row on a wide screen, three to a row on a phone: never a stray item. */
.facts { display: grid; grid-template-columns: repeat(5, max-content); justify-content: space-between; margin: var(--s5) 0 0; padding: 14px 0; border-block: 1px solid var(--line); gap: 12px 20px; }
@media (max-width: 600px) { .facts { grid-template-columns: repeat(3, max-content); justify-content: start; gap: 12px 32px; } }
.facts dt { font: 500 var(--type-xs); color: var(--ink-3); }
.facts dd { margin: 2px 0 0; font: 600 var(--type-md); font-variant-numeric: tabular-nums; }
.facts .rb-ahead { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--line); }
.rb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--s5); }
.rb-actions .tc-btn { min-height: 44px; }
.rb-shared { font: 500 var(--type-sm); color: var(--ink-2); }
.headnote { margin-top: var(--s5); font: 400 var(--type-md); color: var(--ink); max-width: 40em; }
.rb-jump { margin-top: 14px; }
.rb-jump a { font: 600 var(--type-sm); color: var(--accent); text-decoration: none; }
.rb-jump a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rb-hero { margin: 0; }
.rb-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-img); background: var(--surface-sunk); }
.rb-hero figcaption { margin-top: 8px; font: 400 var(--type-xs); color: var(--ink-3); }
.rb-hero figcaption a { color: var(--ink-2); }
.rb-hero-emoji { display: grid; place-items: center; aspect-ratio: 3 / 2; border-radius: var(--r-img); background: var(--accent-wash-2); }
.rb-hero-emoji span { font-size: clamp(72px, 10vw, 128px); }

/* The same two tracks as the title and photo above, so the columns run straight down the page. */
.rb-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: var(--s7); margin-top: var(--s8); }
/* Each column opens under a heavy rule, as a cookbook page (and NYT Cooking) sets it. */
.rb-body h2 { font: 700 var(--type-2xl); letter-spacing: -0.015em; padding-top: 14px; border-top: 3px solid var(--ink); }
.rb-method h2 + .steps { margin-top: var(--s5); }
.rb-ingredients { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 104px); overflow-y: auto; padding-right: 8px; overscroll-behavior: contain; }
.rb-yield { margin-top: 6px; font: 500 var(--type-sm); color: var(--ink-3); }
.rb-ingredients h3 { margin-top: var(--s5); font: 700 var(--type-sm); color: var(--ink); }
.ingredients { list-style: none; margin: 12px 0 0; padding: 0; }
.ingredients li { border-bottom: 1px solid var(--line); }
.ingredients label { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 10px 0; cursor: pointer; font: 400 var(--type-lg); }
.ingredients input {
  flex: none; width: 20px; height: 20px; margin: 4px 0 0; border-radius: 50%; border: 1.5px solid var(--line-strong);
  -webkit-appearance: none; appearance: none; background: var(--surface); cursor: pointer; display: grid; place-items: center;
}
.ingredients input:checked { background: var(--accent); border-color: var(--accent); }
.ingredients input:checked::after { content: ""; width: 6px; height: 10px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ingredients input:focus-visible { box-shadow: var(--focus); outline: none; }
.ingredients input:checked + span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.rb-q { font-weight: 600; font-variant-numeric: tabular-nums diagonal-fractions; }
.salt-note { margin-top: var(--s4); font: 400 var(--type-sm); color: var(--ink-2); padding: 12px 14px; background: var(--bg-raised); border-radius: var(--r-sm); }
.rb-wake { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--s5); padding: 14px 16px; border-radius: var(--r-input); background: var(--surface); border: 1px solid var(--line-strong); cursor: pointer; }
.rb-wake[hidden] { display: none; }
.rb-wake input { flex: none; width: 40px; height: 24px; margin: 0; border-radius: 999px; background: var(--surface-sunk); -webkit-appearance: none; appearance: none; position: relative; cursor: pointer; transition: background-color 160ms ease; box-shadow: inset 0 0 0 1px var(--line-strong); }
.rb-wake input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(26, 20, 22, 0.25); transition: transform 160ms ease; }
.rb-wake input:checked { background: var(--accent); box-shadow: none; }
.rb-wake input:checked::after { transform: translateX(16px); }
.rb-wake input:focus-visible { outline: none; box-shadow: var(--focus); }
.rb-wake span { font: 400 var(--type-sm); color: var(--ink-2); }
.rb-wake b { display: block; font-weight: 600; color: var(--ink); }

.rb-method { max-width: none; }
.steps { list-style: none; counter-reset: step; margin: var(--s5) 0 0; padding: 0; }
/* "Step 1" above each step, as NYT Cooking sets it, rather than a large numeral in the margin. */
.steps li { counter-increment: step; position: relative; font: 400 var(--type-lg); }
.steps li + li { margin-top: var(--s6); }
.steps li::before { content: "Step " counter(step); display: block; margin-bottom: 4px; font: 700 var(--type-md); color: var(--ink); font-variant-numeric: tabular-nums; }
.steps li:target { background: var(--accent-wash-2); border-radius: var(--r-sm); box-shadow: 0 0 0 10px var(--accent-wash-2); }
.rb-method h2 + .notes { margin-top: var(--s4); }
.rb-method .notes { font: 400 var(--type-lg); color: var(--ink); max-width: 62ch; }
.rb-method h2:not(:first-child) { margin-top: var(--s8); }

.rb-recipe + .rb-appcard { margin-top: var(--s9); }
.rb-open { margin-top: 8px; }
.rb-open a { font: 600 var(--type-sm); color: var(--accent); }
.rb-related { margin-top: var(--s9); }
.rb-related h2 { margin-bottom: var(--s5); }
.rb-hub-links { margin-top: var(--s6); color: var(--ink-2); font: 400 var(--type-md); }
.rb-hub-links a { color: var(--accent); text-underline-offset: 3px; text-decoration-color: rgba(176, 49, 73, 0.4); }

@media (max-width: 1023px) {
  /* On a phone the photo comes straight after the title, before the facts and the headnote. */
  .rb-top { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .rb-intro { display: contents; }
  .rb-intro > * { order: 3; }
  .rb-intro > .tc-crumbs, .rb-intro > h1, .rb-intro > .rb-by { order: 1; }
  .rb-hero { order: 2; margin-top: var(--s5); }
  .rb-body { grid-template-columns: 1fr; gap: var(--s7); margin-top: var(--s7); }
  .rb-ingredients { position: static; max-height: none; overflow: visible; padding-right: 0; }
}
@media (max-width: 600px) {
  .rb-hero img, .rb-hero-emoji { border-radius: 0; margin-inline: calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); max-width: none; }
  .rb-hero figcaption { margin-top: 8px; }
  .facts { gap: 12px 22px; }
}

/* Print: the recipe and nothing else. */
@media print {
  .tc-head, .tc-skip, .tc-foot, .tc-appcard, .rb-related, .rb-hub-links, .rb-actions, .rb-jump, .rb-wake, .tc-crumbs, .rb-hero { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .tc-main { padding-top: 0; }
  .rb-top { display: block; }
  .rb-intro h1 { font-size: 22pt; }
  .headnote { font-size: 11pt; }
  .rb-body { display: grid; grid-template-columns: 34% 1fr; gap: 24pt; margin-top: 12pt; padding-top: 12pt; }
  .rb-ingredients { position: static; max-height: none; overflow: visible; }
  .ingredients label { min-height: 0; padding: 3pt 0; font-size: 10pt; }
  .ingredients input { display: none; }
  .steps li { font-size: 11pt; break-inside: avoid; }
  .steps li + li { margin-top: 8pt; }
  .steps li::before { font-size: 9pt; color: #000; }
  .rb-body h2 { font-size: 14pt; }
}