/* The recipe is a private scratchpad, not a score or a prescribed routine. */
.home-view { padding-top: 2.5rem; }
.home-intro { min-height: auto; padding: 1.2rem 0 2rem; }
.home-intro h1 { font-size: clamp(2rem, 3.3vw, 3.5rem); max-width: 22ch; line-height: 1.08; }
.home-intro .home-signal { font-size: clamp(1rem, 1.5vw, 1.2rem); }
.home-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
#home-path > .home-app { display: flex; flex-direction: column; aspect-ratio: auto; grid-area: auto; border-radius: 1rem; overflow: hidden; padding: 0; }
#home-path .app-art { width: 100%; height: auto; aspect-ratio: 3/2; flex-shrink: 0; }
#home-path .app-art img { width: 100%; height: 100%; object-fit: contain; }
#home-path .home-app-copy { display: flex; flex-direction: column; width: 100%; padding: 1.4rem 1.5rem; min-height: 10.5rem; gap: .6rem; }
.home-app .home-app-copy strong { font-size: clamp(1.45rem, 2.3vw, 2.1rem); line-height: 1.1; }
.home-app .home-app-copy > span { font-size: 1rem; max-width: 46ch; line-height: 1.5; }
.home-app .home-app-copy i { width: 2.1rem; height: 2.1rem; font-size: 1.2rem; margin-top: .4rem; }
#home-path .home-app-copy small { align-self: flex-start; }
#home-path .home-app-copy i { align-self: flex-end; margin-top: auto; }
#home-path > .home-app-love { grid-column: 1/-1; flex-direction: row; align-items: center; }
#home-path .home-app-love .app-art { width: 50%; flex: 0 0 50%; }
.recipe { position: relative; width: min(100%, 78rem); margin: 5rem auto 2rem; color: #193e40; scroll-margin-top: 6rem; }
.recipe * { box-sizing: border-box; }
.recipe-heading { max-width: 40rem; margin-bottom: 1.8rem; }
.recipe-kicker { font: 700 .72rem/1.5 system-ui, sans-serif; letter-spacing: .14em; color: #267b70; }
.recipe h2 { font: 400 clamp(1.8rem, 3vw, 2.6rem)/1.12 Georgia, serif; margin: .65rem 0 1rem; text-transform: none; letter-spacing: -.035em; }
.recipe p { font: 400 1rem/1.6 system-ui, sans-serif; }
.recipe h3 { font: 400 1.65rem/1.2 Georgia, serif; margin: .4rem 0 .8rem; }
.recipe-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.recipe-pantry { padding: 1rem 0; }
.recipe-ingredients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0 1.5rem; }
.recipe button, .recipe input, .recipe textarea, .recipe select { font: inherit; }
.recipe button { cursor: pointer; border: 1px solid #286f6340; color: #193e40; background: #faf7ef; border-radius: .65rem; padding: .7rem .9rem; min-height: 44px; }
.recipe .ingredient { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 90px; font: 600 .82rem/1.2 system-ui; background: var(--ingredient-color, #dfebe5); }
.ingredient .ingredient-symbol { font-size: 1.7rem; }
.ingredient[aria-pressed="true"] { border: 2px solid #236f61; box-shadow: inset 0 0 0 2px #fff9; }
.recipe button:hover { filter: brightness(.97); }
.recipe :focus-visible { outline: 3px solid #d45e17; outline-offset: 3px; }
.recipe label { display: block; font: 500 .87rem/1.5 system-ui; margin: .5rem 0; }
.recipe input, .recipe textarea, .recipe select { width: 100%; color: #193e40; background: #fffdf8; border: 1px solid #c5cdc4; border-radius: .45rem; padding: .65rem; font: 400 1rem/1.4 system-ui; }
.recipe textarea { resize: vertical; min-height: 4.5rem; }
.recipe-add-line { display: flex; gap: .5rem; }
.recipe-add-line input { min-width: 0; }
.recipe-sheet { background: #fffaf0; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid #d6cdbb; border-radius: .8rem 1.6rem .8rem .8rem; box-shadow: 0 14px 36px #4b382410; }
.recipe-item { border-bottom: 1px solid #ddcfb7; padding: 1rem 0; }
.recipe-item-head { display: flex; gap: .55rem; align-items: center; }
.recipe-item-head input { background: transparent; border: 0; font-weight: 650; }
.recipe .recipe-remove { background: none; flex: 0 0 44px; padding: .4rem; font-size: 1.1rem; }
.recipe-item-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.recipe-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.4rem 0 1rem; }
.recipe #recipe-save { background: #286f63; color: #fff; }
.recipe #recipe-save:disabled { cursor: wait; opacity: .7; }
.recipe-download { display: inline-block; color: #286f63; margin: 0 0 1rem; text-underline-offset: .2em; }
.recipe-download[hidden] { display: none; }
.recipe-status { color: #286f63; min-height: 1.5em; }
.recipe small { display: block; font: 400 .8rem/1.5 system-ui; color: #64746e; }
.jonas-recipe { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 5vw, 4rem); padding: 3rem 0 4rem; margin-top: 4rem; border-top: 1px solid #c7c5b4; }
.jonas-recipe-art { display: block; max-width: 28rem; transform: rotate(-1deg); box-shadow: 0 14px 38px #4b382418; }
.jonas-recipe-art img { display: block; width: 100%; height: auto; }
.jonas-recipe p { max-width: 40ch; }
@media (max-width: 760px) {
  .jonas-recipe { grid-template-columns: 1fr; }
  .jonas-recipe > div { order: -1; }
  .jonas-recipe-art { margin: 0 auto; }
  .home-view { padding-top: 1.5rem; }
  .home-intro h1 { font-size: 2.15rem; max-width: 18ch; }
  .home-apps { grid-template-columns: 1fr; }
  #home-path .home-app-copy { padding: 1.2rem; min-height: auto; }
  .home-app .home-app-copy > span { font-size: .95rem; }
  #home-path > .home-app-love { grid-column: auto; flex-direction: column; }
  #home-path .home-app-love .app-art { width: 100%; flex: auto; }
  .recipe { margin-top: 3rem; }
  .recipe-workspace { grid-template-columns: 1fr; gap: 1rem; }
  .recipe-ingredients { gap: .45rem; }
  .recipe-item-fields { grid-template-columns: 1fr; }
}