/* Alloro · importazione ed editor della ricetta (docs/design/web-v1, #p-importa) */
.imp { padding: 28px 24px 48px; display: grid; gap: 24px; }
.imp-head { display: grid; gap: 8px; }
.imp-head h1 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; }
.imp-head p { color: var(--ink-2); max-width: 64ch; }
.link-bar { display: flex; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 10px; }
.link-bar .input-wrap { flex: 1; min-width: 220px; }
.link-bar .input { border: 0; background: transparent; font-family: var(--f-mono); font-size: 14px; padding-left: 40px; }
.link-bar .input:focus { box-shadow: none; }
.link-bar:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--sage-soft); }
.link-bar .form-errors { flex-basis: 100%; padding: 0 10px 4px; }
.imp-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 28px; align-items: start; }
.imp-side { display: grid; gap: 16px; }
.imp-stack { display: grid; gap: 16px; max-width: 720px; }
.src-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; display: grid; }
.src-card .photo { aspect-ratio: 9 / 11; }
.src-card__body { padding: 16px; display: grid; gap: 10px; font-size: 14px; min-width: 0; }
.src-card__body a { overflow-wrap: anywhere; }
.src-card__body blockquote { margin: 0; padding-left: 12px; border-left: 2px solid var(--line); color: var(--ink-2); font-size: 14px; }
.pipeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pipeline li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px 0; font-size: 14px; border-top: 1px solid var(--line); }
.pipeline li:first-child { border-top: 0; }
.pipeline .st { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.pipeline .st svg { width: 14px; height: 14px; }
.st--done { background: var(--action); color: var(--action-ink); }
.st--skip { background: var(--surface-2); color: var(--ink-2); border: 1px dashed var(--line); }
.st--miss { background: var(--surface-2); color: var(--ink-2); }
.st--run { border: 2px solid var(--line); border-top-color: var(--action); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pipeline small { display: block; color: var(--ink-2); font-size: 13px; }
.draft { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; display: grid; gap: 20px; min-width: 0; }
.draft--solo { max-width: 860px; }
.draft-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.draft-head h2 { font-size: 24px; font-weight: 700; }
.draft fieldset > legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.ing-edit { display: grid; gap: 8px; }
.ing-list, .step-list { display: grid; gap: 8px; }
.ing-row { display: grid; grid-template-columns: 90px 130px minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.ing-head { display: grid; grid-template-columns: 90px 130px minmax(0, 1fr) 36px; gap: 8px; font-size: 12px; color: var(--ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ing-row .input { min-height: 40px; padding: 8px 10px; font-size: 15px; }
.ing-row select.input { padding-right: 30px; background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; }
.ing-row .input.num, .ing-row .num .input { font-family: var(--f-mono); font-size: 14px; }
.ing-row.flag > .input, .ing-row.flag > .field .input { border-color: var(--warn); background-color: var(--warn-soft); }
.ing-row .field { gap: 4px; }
.ing-row .field .form-errors { font-size: 12px; }
.ing-row__more { grid-column: 2 / 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ing-row__more .input { min-height: 36px; font-size: 14px; }
.ing-row:not(:focus-within) .ing-row__more:not(.has-value) { display: none; }
.add-row { justify-self: start; }
.step-list { counter-reset: step; gap: 12px; }
.step-edit { counter-increment: step; display: grid; grid-template-columns: 30px minmax(0, 1fr) 96px 36px; gap: 10px; align-items: start; }
.step-edit > .num::before { content: counter(step); font: 800 20px/40px var(--f-display); color: var(--brand); }
.step-edit .input { min-height: 40px; }
.step-edit__min .input { font-family: var(--f-mono); font-size: 14px; }
/* foto del passaggio: miniature da riordinare o trascinare su un altro passaggio, sopra l'area per caricarne altre */
.step-edit__photo { grid-column: 2 / 4; display: grid; gap: 10px; font-size: 14px; border-radius: var(--r-m); transition: background .15s, outline-color .15s; outline: 2px dashed transparent; outline-offset: 4px; }
.step-edit__photo.is-over { outline-color: var(--action); background: var(--sage-soft); }
.step-photos { display: flex; gap: 12px; flex-wrap: wrap; }
.step-photos:empty { display: none; }
.step-photos .photos__item { width: 152px; cursor: grab; }
.step-photos .photos__item img, .step-photos .photos__item .ph { width: 152px; pointer-events: none; }
.step-photos .photos__item.is-dragged { opacity: .4; }
.step-photos .photos__actions { gap: 0; justify-content: space-between; }
.step-photos .photos__actions .icon-btn { width: 30px; height: 30px; }
.step-photos .photos__actions .icon-btn svg { width: 18px; height: 18px; }
.step-photos .icon-btn:disabled { opacity: .3; cursor: default; background: transparent; }
.dropzone--s { padding: 12px 14px; }
.dropzone--s p { font-size: 14px; }
.photos { display: flex; gap: 12px; flex-wrap: wrap; }
.photos__item { width: 132px; display: grid; gap: 6px; }
.photos__item img, .photos__item .ph { width: 132px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; font-size: 12px; color: var(--ink-2); }
.photos > .photos__item:first-child img { outline: 2px solid var(--action); outline-offset: 2px; }
.photos__item div { display: flex; gap: 4px; }
.photos:empty { display: none; }
/* foto in caricamento: barra al posto della copertina; se fallisce resta il motivo e la X per toglierla */
.photos__progress { width: 100%; height: 6px; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-2); accent-color: var(--action); }
.photos__progress::-webkit-progress-bar { background: var(--surface-2); }
.photos__progress::-webkit-progress-value { background: var(--action); border-radius: 999px; transition: width .2s; }
.photos__progress::-moz-progress-bar { background: var(--action); border-radius: 999px; }
.photos__item:not([data-uploading]) .photos__progress { display: none; }
.photos__item[data-uploading] img, .photos__item[data-failed] img { opacity: .6; }
.photos__item[data-uploading] .btn, .photos__item[data-failed] .btn { display: none; }
.photos__item[data-failed] .photos__actions { justify-content: flex-end; }
.photos__error { color: var(--warn); font-size: 12px; line-height: 1.3; }
.dropzone { display: grid; justify-items: center; gap: 4px; padding: 22px 16px; border: 2px dashed var(--line); border-radius: var(--r-m); background: var(--bg); text-align: center; color: var(--ink-2); transition: border-color .15s, background .15s; }
.dropzone svg { width: 26px; height: 26px; color: var(--action); margin-bottom: 4px; }
.dropzone p { color: var(--ink); }
.dropzone small { font-size: 13px; }
.dropzone label { cursor: pointer; }
.dropzone.is-over { border-color: var(--action); background: var(--sage-soft); }
.dropzone:focus-within { outline: 2px solid var(--action); outline-offset: 2px; }
.draft-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 18px; }
.draft-foot p { font-size: 13px; color: var(--ink-2); max-width: 46ch; }
@media (max-width: 900px) { .imp-grid { grid-template-columns: minmax(0, 1fr); } .imp { padding: 20px 16px 40px; } .src-card { grid-template-columns: 140px minmax(0,1fr); } .src-card .photo { aspect-ratio: auto; height: 100%; } }
@media (max-width: 600px) {
  .ing-head { display: none; }
  .ing-row { grid-template-columns: 84px minmax(0, 1fr) 36px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
  .ing-row > :nth-child(3) { grid-column: 1 / 3; grid-row: 1; }
  .ing-row > .icon-btn { grid-column: 3; grid-row: 1; }
  .ing-row > :nth-child(1) { grid-column: 1; grid-row: 2; }
  .ing-row > :nth-child(2) { grid-column: 2; grid-row: 2; }
  .ing-row__more { grid-column: 1 / 3; }
  .step-edit { grid-template-columns: 24px minmax(0, 1fr) 36px; }
  .step-edit__min { grid-column: 2; grid-row: 2; }
  .step-edit__photo { grid-column: 2 / 3; }
  .src-card { grid-template-columns: minmax(0,1fr); } .src-card .photo { aspect-ratio: 16/9; }
  .draft { padding: 18px; }
}