/* ---------- the sheet that adds a recipe ingredient of your own ------------- */

/* above the "counts as" picker it can be opened from, so the two don't fight */
#ingOverlay { z-index: 70; }

#ingSheet { max-width: 520px; padding: 26px; }
#ingSheet h3 {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px; padding-right: 30px;
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--text);
}
#ingSheet h3 .ic { width: 18px; height: 18px; color: var(--accent); }
#ingSheet .esub { color: var(--text-muted); font-size: 13px; line-height: 1.55; margin-bottom: 16px; }
#ingSheet .esub b { color: var(--text-soft); }
#ingSheet .esub i, #ingSheet .esub em { color: var(--text-soft); font-style: italic; }

.ci-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.ci-form .pf-12 { grid-column: 1 / -1; }
@media (max-width: 520px) { .ci-form { grid-template-columns: 1fr; } }

.ci-clash {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11.5px; font-weight: 650; line-height: 1.4; color: var(--amber);
}
.ci-clash:empty { display: none; }
.ci-clash .ic { width: 13px; height: 13px; flex: none; margin-top: 1px; }

/* which of the two lists the chosen department puts this name in — the whole
   point of the sheet, so it's stated rather than left to be inferred */
.ci-which {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px; padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.5; color: var(--text-soft);
  background: color-mix(in srgb, var(--c) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--c) 24%, transparent);
}
.ci-which.ing { --c: var(--accent); }
.ci-which.hh  { --c: var(--cx-same-c); }
.ci-which > .ic { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--c); }
.ci-which b { color: var(--text); }

.ci-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
/* deleting sits apart from saving — it isn't the next thing you'd reach for */
.ci-gap { flex: 1 1 0; min-width: 0; }

/* the row on the ingredient list that you own, rather than the app */
.ing-mine {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--green-dark);
  font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.prow.ing-row .ing-edit {
  flex: none;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--text-muted); cursor: pointer; padding: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.prow.ing-row .ing-edit:hover { background: var(--surface-3); color: var(--text); }
.prow.ing-row .ing-edit .ic { width: 14px; height: 14px; }

/* "nothing called that — make it" at the foot of a search suggestion list */
.link-sug .sug-new, .lp-new {
  display: flex; align-items: center; gap: 7px; width: 100%;
  text-align: left; cursor: pointer;
  font-weight: 700; color: var(--accent);
}
.lp-new {
  margin-top: 10px; padding: 11px 13px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: 13px;
}
.lp-new:hover { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.lp-new .ic { width: 15px; height: 15px; flex: none; }
.lp-new > span { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.lp-new i { font-style: normal; font-weight: 500; color: var(--text-muted); font-size: 11.5px; }
.link-sug .sug-new .ic { width: 14px; height: 14px; flex: none; }

/* "5 products already point at this" beside a name in the picker — context, not
   a status, so it reads quieter than the green "covered" */
.lp-row .lp-stock.soft { color: var(--text-muted); font-weight: 650; display: inline-flex; align-items: center; gap: 4px; }
.lp-row .lp-stock.soft .ic { width: 12px; height: 12px; }

/* the button that starts one, on the ingredient list's toolbar */
.ing-newbtn { white-space: nowrap; }
.ing-emptyadd { margin-top: 14px; }