@layer sections {
/* ── Share preview page ───────────────────────────────────── */
.share-page {
  background: var(--bg, #fbfaf6);
  min-height: 100vh;
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--text, #2a2a2a);
}
.share-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  max-width: 720px;
  margin: 0 auto;
}
.share-logo { display: flex; align-items: center; }
.share-header-link {
  font-size: 13px;
  color: var(--faint, #888);
  text-decoration: none;
}
.share-header-link:hover { color: var(--text); }

.share-card {
  max-width: 640px;
  margin: 0 auto 60px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
}
.share-hero {
  height: 280px;
  background: #f0eee7;
  position: relative;
  overflow: hidden;
}
.share-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.share-body { padding: 28px 32px 36px; }
.share-meta {
  font-size: 12px;
  color: var(--faint, #888);
  margin-bottom: 6px;
}
.share-title {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  margin: 0 0 14px;
  color: var(--text);
}
.share-detail-row {
  display: flex;
  gap: 16px;
  margin-bottom: 22px;
  font-size: 13px;
  color: var(--faint);
}
.share-detail { display: inline-flex; gap: 4px; }
.share-cta {
  display: block;
  width: 100%;
  background: var(--text);
  color: var(--surface);
  border: none;
  padding: 14px 24px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.1px;
  cursor: pointer;
  margin-bottom: 28px;
  transition: opacity var(--t-slow);
}
.share-cta:hover { opacity: 0.88; }
.share-cta--saved { background: var(--border, #d9d9d9); color: var(--faint); cursor: not-allowed; }
.share-cta--saved:hover { opacity: 1; }
.share-body form { margin: 0; }
.share-section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--faint);
  margin: 24px 0 10px;
}
.share-ingredients {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}
.share-ingredients li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border, #eee);
  font-size: 14px;
}
.share-ingredients li:last-child { border-bottom: none; }
.share-steps {
  padding-left: 20px;
  margin: 0 0 10px;
}
.share-steps li {
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.6;
}
.share-source {
  margin-top: 24px;
  font-size: 12px;
  color: var(--faint);
}
.share-source a { color: #1D9E75; text-decoration: none; }
.share-source a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .share-card { border-radius: 0; margin: 0 0 60px; }
  .share-body { padding: 20px 20px 32px; }
  .share-title { font-size: 24px; }
  .share-hero { height: 220px; }
}
.import-error-text { display: flex; flex-direction: column; gap: 2px; }
.import-error-text strong { color: var(--text); font-weight: 600; }
.import-error-text span { color: var(--faint); font-size: 12px; }

/* Form elements */
.form-group { margin-bottom: 18px; }
.form-label {
  font-size: 11px; font-weight: 600; color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.6px;
  display: block; margin-bottom: 6px;
}
.form-input {
  width: 100%; height: 36px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--text);
  background: oklch(99.5% 0.004 65);
  border: 1px solid var(--border);
  border-radius: var(--r);
  outline: none;
  transition: border-color var(--t-slow);
}
.form-input:focus { border-color: var(--sage-dot); }
.form-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  background: oklch(99.5% 0.004 65);
  border: 1px solid var(--border);
  border-radius: var(--r);
  outline: none;
  resize: none;
  transition: border-color var(--t-slow);
  line-height: 1.5;
  font-family: 'DM Sans', sans-serif;
}
.form-textarea:focus { border-color: var(--sage-dot); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }

.form-label-hint {
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--faint);
  opacity: 0.7;
}
.form-input--narrow { max-width: 120px; }

/* Prep / Cook / Marinade minute inputs */
.time-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.time-field { display: flex; flex-direction: column; gap: 5px; }
.time-field-label {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* Tags form */
.tag-options { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-option {
  font-size: 12px; font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  border: 1.5px solid var(--border);
  color: var(--muted);
  transition: all var(--t);
}
.tag-option input[type=checkbox] { display: none; }

/* Coloured when selected — labels toggle via :has(:checked); JS-built chips
   (no checkbox) use .tag-option--active. Colour comes from data-swatch. */
.tag-option--active,
.tag-option:has(input:checked) {
  color: var(--swatch-fg);
  background: var(--swatch-bg);
  border-color: transparent;
}

/* Dynamic rows */
.dynamic-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.dynamic-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dynamic-row--step { align-items: flex-start; }
#ingredients-fields { gap: 12px; }
/* Flag a quantity/unit the user hasn't filled in. The optional max is exempt. */
.ingredient-qty:not(.ingredient-qty-max):placeholder-shown,
.ingredient-unit:has(option[value=""]:checked) {
  border-color: var(--rose-dot);
}
/* Ingredient rows stack two lines: qty pinned left / unit right, then item name
   left / delete button right. The lines share the .ingredient-lines column so
   the unit and delete button align on the right edge. */
.dynamic-row--ingredient { align-items: center; gap: 8px; }
.ingredient-lines { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ingredient-line { display: flex; align-items: center; gap: 8px; }
/* Quantity group left, unit pinned right; the hidden max expands into the gap
   between them so revealing it never pushes the unit off screen. */
.ingredient-line--measure { justify-content: space-between; }
.ingredient-qty-group { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; }
.ingredient-qty { flex: 0 0 72px; min-width: 0; }
/* Reserve the max slot permanently and hide it with opacity so toggling the
   range never reflows the row or pushes the unit off screen. Stays in the DOM
   and a11y tree; pointer-events off so sighted users can't hit it while hidden. */
.ingredient-qty-max { flex: 0 0 72px; }
.ingredient-qty-max.is-range-hidden { opacity: 0; pointer-events: none; }
.ingredient-range-toggle {
  flex-shrink: 0;
  width: 26px; height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 15px; line-height: 1;
  font-family: 'DM Sans', sans-serif;
}
.ingredient-range-toggle.is-active {
  color: var(--sage-fg);
  background: var(--sage-bg);
  border-color: transparent;
}
.ingredient-unit { flex: 0 1 132px; width: auto; max-width: 100px; min-width: 0; }
.ingredient-item { flex: 1 1 auto; min-width: 0; }
.dyn-step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  color: var(--muted);
  margin-top: 6px;
}
/* Steps are numbered by row order, not by the stored position, so the count
   stays correct as rows are added/removed (hidden display:none rows are
   skipped by the counter). */
#steps-fields { counter-reset: step; }
#steps-fields .dyn-step-num { counter-increment: step; }
#steps-fields .dyn-step-num::before { content: counter(step); }
.dyn-del {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  color: var(--faint);
  font-size: 14px;
  flex-shrink: 0;
  transition: opacity var(--t);
  font-family: 'DM Sans', sans-serif;
}
.btn-add-item {
  font-size: 12px; font-weight: 500;
  border: none;
  border-radius: var(--r-sm);
  padding: 5px 12px;
  cursor: pointer;
}
.btn-add-item--sage  { color: var(--sage-fg);  background: var(--sage-bg);  }
.btn-add-item--peach { color: var(--peach-fg); background: var(--peach-bg); }

/* On phones the ingredient row stacks (qty + unit + delete on top, the item
   field full-width below) and the add buttons go full-width and tap-friendly. */
@media (max-width: 600px) {
  #ingredients-fields { gap: 22px; }
  .btn-add-item { width: 100%; padding: 11px 12px; font-size: 14px; text-align: center; }
}

/* Photo placeholder */
.photo-placeholder {
  height: 150px;
  border-radius: var(--r-md);
  border: 2px dashed oklch(80% 0.04 65);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.photo-plus { font-size: 22px; color: oklch(50% 0.04 65); }
.photo-label { font-size: 12px; font-weight: 500; color: oklch(50% 0.04 65); }

/* Drawer footer */
.drawer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.drawer-footer-right { display: flex; gap: 8px; }

/* Top Save/Cancel row — mobile only (see media query below) */
.drawer-form-top-actions { display: none; }

/* Validation errors shown when a save is rejected */
.form-errors {
  background: var(--rose-bg);
  color: var(--rose-fg);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13px;
}
.form-errors-title { font-weight: 600; margin: 0 0 6px; }
.form-errors-list { margin: 0; padding-left: 18px; }
.form-errors-list li { margin-top: 2px; }
.delete-btn {
  color: oklch(55% 0.09 8);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.delete-btn form, .delete-btn input[type=submit] {
  display: inline;
  color: oklch(55% 0.09 8);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}
}