.recipe-detail { max-width: 1000px; margin: 0 auto; }
.recipe-back { display: inline-block; width: auto; padding: 0.55rem 1rem; margin-bottom: 2rem; }
.recipe-detail-layout { display: grid; gap: 2rem; align-items: start; }
.recipe-detail-layout.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.recipe-detail h1 { margin-bottom: 0.75rem; }
.recipe-detail h2 { margin-top: 2rem; }
.recipe-detail-photo { display: block; width: 100%; max-height: 520px; object-fit: cover; border-radius: 16px; }
.recipe-detail-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: #777;
  font-size: 0.95rem;
  line-height: 1.5;
}
.recipe-detail-meta svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.recipe-detail .multiline { white-space: pre-line; line-height: 1.75; }
.recipe-steps { list-style: none; padding: 0; margin: 1.5rem 0; }
.recipe-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 1.1rem; margin-bottom: 1.75rem; line-height: 1.7; }
.step-number { display: grid; place-items: center; width: 36px; height: 36px; box-sizing: border-box; border: 1px solid currentColor; border-radius: 50%; font-size: 1.1rem; line-height: 1; }
@media (max-width: 850px) { .recipe-detail-layout.has-photo { grid-template-columns: 1fr; } .recipe-detail-photo { grid-row: 1; max-height: 320px; } }

.detail-edit { width: auto; float: right; padding: 0.55rem 1rem; margin: 0; }
.detail-title { display: flex; align-items: start; gap: 1rem; }
.detail-title h1 { flex: 1; }
.detail-title .favorite-form { flex: none; }
body .detail-title .favorite-btn { width: 36px; height: 36px; padding: 3px; margin: 0; background: transparent; border: 0; }
.detail-title .favorite-btn svg { stroke: #000; filter: none; }
.detail-title .favorite-btn.is-favorite svg { fill: #000; }
.detail-servings-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin: 0.85rem 0 1.25rem; }
.detail-servings-row > label { margin: 0; }
.detail-servings { display: flex; width: 120px; height: 36px; flex: none; align-items: center; box-sizing: border-box; border: 1px solid #ddd; border-radius: 10px; margin: 0; }
.detail-servings button { width: 32px; height: 100%; flex: none; margin: 0; padding: 0; border: 0; background: transparent; color: #000; line-height: 1; }
.detail-servings input { width: 0; height: 100%; min-width: 0; flex: 1; margin: 0; padding: 0; border: 0; text-align: center; }
.recipe-photo-notes { min-width: 0; }
#recipe-notes textarea { min-height: 120px; font: inherit; }
#recipe-notes button { width: auto; padding: 0.5rem 1rem; }
#recipe-editor { box-sizing: border-box; width: min(600px, calc(100% - 2rem)); max-height: calc(100dvh - 4rem); overflow-y: auto; border: 1px solid #ddd; border-radius: 16px; padding: 2rem; }
#recipe-editor::backdrop { background: #0006; }
#recipe-editor label { display: block; margin: 0.75rem 0; }
#recipe-editor textarea { font: inherit; }
.editor-actions { display: flex; gap: 12px; }
.interaction-status { position: fixed; bottom: 24px; right: 24px; background: #fff; border: 1px solid #ddd; padding: 12px 18px; border-radius: 12px; z-index: 80; }

.detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 2rem; }
.detail-toolbar { justify-content: flex-end; }
.detail-toolbar .recipe-back { margin: 0; }
.detail-actions { display: flex; align-items: center; gap: 16px; flex: none; }
.detail-actions .favorite-form { position: static; margin: 0; }
.detail-actions .detail-edit { float: none; margin: 0; }
body .detail-actions .favorite-btn { display: grid; place-items: center; position: static; width: 36px; height: 36px; margin: 0; padding: 3px; border: 0; background: transparent; }
.detail-actions .favorite-btn svg { stroke: #000; filter: none; }
.detail-actions .favorite-btn.is-favorite svg { fill: #000; }
.detail-title { flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px; }
.detail-title h1 { flex: 0 1 auto; margin: 0; }
.detail-title .recipe-detail-meta { margin: 0; }
.saved-note { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px 0; border-bottom: 1px solid #eee; line-height: 1.6; }

/* Full-width recipe heading and compact, aligned page controls. */
.detail-title { display: block; margin-bottom: 2rem; }
.detail-title h1 { margin: 0 0 0.75rem; }
.detail-actions .favorite-form { display: flex; align-items: center; }
body .detail-actions .areti-button.favorite-btn { border: none; border-radius: 0; background: transparent; box-shadow: none; }
body .detail-actions .areti-button.favorite-btn:hover { background: transparent; box-shadow: none; transform: none; }
.detail-actions .favorite-btn:hover svg { fill: #000; }
#detail-servings { appearance: textfield; -moz-appearance: textfield; }
#detail-servings::-webkit-inner-spin-button, #detail-servings::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#recipe-notes textarea { resize: none; height: 120px; }
#detail-status:empty { display: none; }

.recipe-detail-text .recipe-detail-meta { margin: 1rem 0 1.5rem; }
.recipe-instructions-notes { min-width: 0; }
.recipe-instructions-notes > h2:first-child { margin-top: 0; }