/* Add / Edit fragrance dialog (collection-picker.js). Search first, then "Your bottle". Colours come from the shared tokens,
   so every palette and dark mode follows. All rules are scoped to #edit-dialog. */
#edit-dialog.cf-dialog {
  --cf-ring: 0 0 0 4px color-mix(in srgb, var(--accent-color) 16%, transparent);
  --cf-ease: cubic-bezier(.22, 1, .36, 1);
  width: min(720px, calc(100vw - 24px)); max-width: none; max-height: min(92dvh, 900px); padding: 0;
  border: 1px solid var(--line); border-radius: 28px; background: var(--bg-card); color: var(--ink); box-shadow: var(--shadow-panel); overflow: hidden;
}
#edit-dialog.cf-dialog[open] { display: flex; flex-direction: column; }
#edit-dialog [hidden] { display: none !important; }
#edit-dialog .cf-form { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
#edit-dialog .cf-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0; padding: 26px 28px 10px; background: transparent; }
#edit-dialog .cf-top h2 { margin: 2px 0 0; font: 600 1.9rem/1.1 var(--studio-serif); letter-spacing: -.02em; color: var(--ink); }
#edit-dialog .cf-lede { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }
#edit-dialog .cf-body { display: grid; align-content: start; gap: 22px; flex: 1; min-height: 0; padding: 10px 28px 24px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

/* ---------- Typography shared by labels ---------- */
#edit-dialog .cf-label, #edit-dialog label.cf-field, #edit-dialog .cf-field > label, #edit-dialog .cf-field > .cf-label { font: 700 .64rem/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
#edit-dialog .cf-label small { margin-inline-start: 8px; font-weight: 500; font-size: .72rem; letter-spacing: 0; text-transform: none; }
#edit-dialog .cf-field { display: grid; align-content: start; gap: 8px; min-width: 0; }
#edit-dialog .cf-wide { grid-column: 1 / -1; }
#edit-dialog .cf-help { font: 500 .76rem/1.5 system-ui, sans-serif; color: var(--muted); }

/* ---------- Text fields ---------- */
#edit-dialog .cf-field > :is(input, select, textarea) { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--control-line); border-radius: 16px; background: var(--bg-surface); color: var(--ink); font: 600 1rem/1.2 system-ui, sans-serif; letter-spacing: 0; text-transform: none; box-shadow: none; transition: border-color .2s, box-shadow .2s, background .2s; }
#edit-dialog .cf-field > textarea { min-height: 96px; padding: 14px 16px; font-weight: 500; line-height: 1.5; resize: vertical; }
#edit-dialog .cf-field > select { appearance: none; padding-inline-end: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
#edit-dialog .cf-field > :is(input, select, textarea)::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); font-weight: 500; }
#edit-dialog .cf-field > :is(input, select, textarea):hover { border-color: color-mix(in srgb, var(--accent-color) 45%, var(--control-line)); }
#edit-dialog .cf-field > :is(input, select, textarea):focus { outline: none; border-color: var(--accent-color); box-shadow: var(--cf-ring); background-color: var(--bg-card); }
#edit-dialog [aria-invalid=true] { border-color: var(--red, #a84236) !important; }
#edit-dialog .cf-input { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; border: 1px solid var(--control-line); border-radius: 16px; background: var(--bg-surface); cursor: text; transition: border-color .2s, box-shadow .2s, background .2s; }
#edit-dialog .cf-input:hover { border-color: color-mix(in srgb, var(--accent-color) 45%, var(--control-line)); }
#edit-dialog .cf-input:focus-within { border-color: var(--accent-color); box-shadow: var(--cf-ring); background: var(--bg-card); }
#edit-dialog .cf-input input { flex: 1; min-width: 0; min-height: 50px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; color: var(--ink); font: 600 1.02rem/1.2 system-ui, sans-serif; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
#edit-dialog .cf-input input::-webkit-inner-spin-button, #edit-dialog .cf-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#edit-dialog .cf-input input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); font-weight: 500; }
#edit-dialog .cf-input em { flex: 0 0 auto; font: 700 .9rem/1 system-ui, sans-serif; font-style: normal; letter-spacing: 0; text-transform: none; color: var(--muted); }
#edit-dialog .cf-input:focus-within em { color: var(--accent-color); }

/* ---------- Step 1: search ---------- */
#edit-dialog .cf-search { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 10px 0 18px; border: 1px solid var(--control-line); border-radius: 18px; background: var(--bg-surface); transition: border-color .2s, box-shadow .2s, background .2s; }
#edit-dialog .cf-search:hover { border-color: color-mix(in srgb, var(--accent-color) 45%, var(--control-line)); }
#edit-dialog .cf-search:focus-within { border-color: var(--accent-color); box-shadow: var(--cf-ring); background: var(--bg-card); }
#edit-dialog .cf-search-icon { display: grid; place-items: center; width: 22px; height: 22px; color: var(--muted); }
#edit-dialog .cf-search:focus-within .cf-search-icon { color: var(--accent-color); }
#edit-dialog .cf-search-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#edit-dialog .cf-search input { flex: 1; min-width: 0; min-height: 56px; padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; outline: none; color: var(--ink); font: 600 1.05rem/1.2 system-ui, sans-serif; text-overflow: ellipsis; }
#edit-dialog .cf-search input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); font-weight: 500; }
#edit-dialog .cf-search-clear { flex: 0 0 34px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
#edit-dialog .cf-search-clear:hover { background: var(--accent-color); color: var(--on-accent, #fff); }

#edit-dialog .cf-pop { margin-top: 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-card); box-shadow: 0 18px 40px -30px var(--shadow-float); overflow: hidden; animation: cf-in .25s var(--cf-ease) both; }
#edit-dialog .cf-results { display: grid; max-height: min(340px, 40dvh); padding: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#edit-dialog .cf-res { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 7px 12px 7px 7px; border: 0; border-radius: 15px; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background .15s; }
#edit-dialog .cf-res:hover, #edit-dialog .cf-res[aria-selected=true] { background: color-mix(in srgb, var(--accent-color) 10%, transparent); }
#edit-dialog .cf-res:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }
#edit-dialog .cf-res-photo { border-radius: 13px; }
#edit-dialog .cf-res-text { display: grid; gap: 2px; min-width: 0; }
#edit-dialog .cf-res-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 1rem/1.25 var(--studio-serif); color: var(--ink); }
#edit-dialog .cf-res-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; color: var(--muted); }
#edit-dialog .cf-tag { padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--accent-color) 14%, transparent); color: var(--ink); font: 700 .6rem/1.2 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
#edit-dialog .cf-res-foot { padding: 8px 10px 10px; border-top: 1px solid var(--line); }
#edit-dialog .cf-res-foot p { margin: 4px 6px 8px; font-size: .85rem; line-height: 1.45; color: var(--muted); }
#edit-dialog .cf-res-custom { width: 100%; min-height: 42px; padding: 0 14px; border: 1px dashed var(--control-line); border-radius: 13px; background: transparent; color: var(--ink); font: 600 .84rem/1.2 system-ui, sans-serif; cursor: pointer; transition: border-color .2s, background .2s; }
#edit-dialog .cf-res-custom:hover { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 7%, transparent); }

#edit-dialog .cf-houses { display: grid; gap: 10px; margin-top: 18px; }
#edit-dialog .cf-house-row { display: flex; flex-wrap: wrap; gap: 8px; }
#edit-dialog .cf-house-row button { display: inline-flex; align-items: baseline; gap: 7px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--ink); font: 600 .8rem/1 system-ui, sans-serif; cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--cf-ease); }
#edit-dialog .cf-house-row button small { font-size: .68rem; font-variant-numeric: tabular-nums; color: var(--muted); }
#edit-dialog .cf-house-row button:hover { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 8%, transparent); transform: translateY(-1px); }
#edit-dialog .cf-manual { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 16px 0 0; font-size: .86rem; color: var(--muted); }

/* ---------- Step 2: the chosen fragrance, or the names to type ---------- */
#edit-dialog .cf-card { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 18px 14px 14px; border: 1px solid color-mix(in srgb, var(--accent-color) 35%, var(--line)); border-radius: 22px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent-color) 8%, var(--bg-card)), var(--bg-card) 70%); animation: cf-in .35s var(--cf-ease) both; }
#edit-dialog .cf-card-photo { border-radius: 16px; }
#edit-dialog .cf-card-text { display: grid; gap: 3px; min-width: 0; }
#edit-dialog .cf-card-text strong { font: 600 1.35rem/1.15 var(--studio-serif); letter-spacing: -.01em; color: var(--ink); }
#edit-dialog .cf-card-text > span:not(.cf-label) { font-size: .88rem; color: var(--ink); }
#edit-dialog .cf-card-text small { font-size: .76rem; line-height: 1.45; color: var(--muted); }
#edit-dialog .cf-card-actions { display: grid; gap: 6px; justify-items: end; }
#edit-dialog .cf-names-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; }
#edit-dialog .cf-error { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--red, #a84236) 12%, transparent); color: var(--red, #a84236); font: 600 .84rem/1.4 system-ui, sans-serif; }
#edit-dialog :is(.cf-adopt, .cf-hint) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent-color) 9%, transparent); color: var(--ink); font: 500 .82rem/1.45 system-ui, sans-serif; }
#edit-dialog .cf-adopt { margin-top: 12px; }
#edit-dialog :is(.cf-adopt, .cf-hint) strong { font-weight: 700; }
#edit-dialog .cf-switch { margin: 12px 0 0; }

/* ---------- Your bottle ---------- */
#edit-dialog .cf-bottle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; min-width: 0; margin: 0; padding: 0; border: 0; animation: cf-in .35s var(--cf-ease) both; }
#edit-dialog .cf-bottle legend { display: block; width: 100%; margin: 0 0 16px; padding: 0; font: 600 1.2rem/1.2 var(--studio-serif); letter-spacing: -.01em; color: var(--ink); }
#edit-dialog .cf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#edit-dialog .cf-chips > span { margin-inline-end: 4px; font: 700 .62rem/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
#edit-dialog .cf-chips button { min-height: 34px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font: 600 .78rem/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .2s var(--cf-ease); }
#edit-dialog .cf-chips button:hover { border-color: var(--accent-color); color: var(--ink); transform: translateY(-1px); }
#edit-dialog .cf-chips button[aria-pressed=true] { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 14%, transparent); color: var(--ink); }
#edit-dialog .cf-stepper { display: flex; align-items: stretch; min-height: 52px; border: 1px solid var(--control-line); border-radius: 16px; background: var(--bg-surface); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
#edit-dialog .cf-stepper:focus-within { border-color: var(--accent-color); box-shadow: var(--cf-ring); }
#edit-dialog .cf-stepper button { flex: 0 0 52px; border: 0; background: transparent; color: var(--ink); font: 500 1.4rem/1 system-ui, sans-serif; cursor: pointer; transition: background .2s; }
#edit-dialog .cf-stepper button:hover { background: color-mix(in srgb, var(--accent-color) 12%, transparent); }
#edit-dialog .cf-stepper input { flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; color: var(--ink); text-align: center; font: 700 1.05rem/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
#edit-dialog .cf-stepper input::-webkit-inner-spin-button, #edit-dialog .cf-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#edit-dialog .cf-hint { justify-content: space-between; }

/* segmented packaging control (markup from ui-controls.js) */
#edit-dialog .fin-seg { display: flex; align-items: center; gap: 2px; width: 100%; min-height: 52px; padding: 4px; border: 1px solid var(--control-line); border-radius: 99px; background: var(--bg-surface); }
#edit-dialog .fin-seg button { flex: 1 1 0; min-height: 42px; padding: 0 12px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font: 600 .82rem/1 system-ui, sans-serif; white-space: nowrap; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
#edit-dialog .fin-seg button:hover { color: var(--ink); }
#edit-dialog .fin-seg button[aria-checked=true] { background: var(--bg-card); color: var(--ink); box-shadow: 0 5px 14px -8px var(--shadow-float), 0 0 0 1px var(--line); }
#edit-dialog .fin-seg button:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }

/* ---------- Notes, batch code and actions ---------- */
#edit-dialog .cf-more { padding-top: 4px; border-top: 1px solid var(--line); }
#edit-dialog .cf-more summary { display: flex; align-items: center; gap: 10px; min-height: 46px; font: 600 .92rem/1.2 system-ui, sans-serif; color: var(--ink); cursor: pointer; list-style: none; }
#edit-dialog .cf-more summary::-webkit-details-marker { display: none; }
#edit-dialog .cf-more summary::before { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--accent-color) 14%, transparent); font-size: 1rem; line-height: 1; transition: transform .25s var(--cf-ease); }
#edit-dialog .cf-more details[open] summary::before { content: "−"; }
#edit-dialog .cf-more summary:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; border-radius: 8px; }
#edit-dialog .cf-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; padding: 10px 0 4px; }
#edit-dialog .cf-batch-go { align-self: end; padding-bottom: 14px; }
#edit-dialog .cf-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 16px 28px; border-top: 1px solid var(--line); background: var(--bg-card); }
#edit-dialog .cf-actions > div { display: flex; flex-wrap: wrap; gap: 10px; margin-inline-start: auto; }
#edit-dialog .cf-actions :is(.primary, .secondary) { min-height: 46px; padding-inline: 22px; border-radius: 99px; }
#edit-dialog .cf-actions .danger-text { padding: 8px 4px; font-size: .84rem; font-weight: 600; }
#edit-dialog .text-button { font-size: .84rem; font-weight: 600; }

@keyframes cf-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 640px) {
  #edit-dialog.cf-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 24px; }
  #edit-dialog .cf-top { padding: 20px 18px 8px; }
  #edit-dialog .cf-top h2 { font-size: 1.6rem; }
  #edit-dialog .cf-body { gap: 18px; padding: 8px 18px 18px; }
  #edit-dialog .cf-actions { padding: 12px 18px; }
  #edit-dialog .cf-names-grid, #edit-dialog .cf-bottle, #edit-dialog .cf-more-grid { grid-template-columns: minmax(0, 1fr); }
  #edit-dialog .cf-card { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 12px; }
  #edit-dialog .cf-card-actions { grid-column: 1 / -1; display: flex; justify-content: flex-start; gap: 16px; }
  #edit-dialog .cf-card-text strong { font-size: 1.2rem; }
  #edit-dialog .fin-seg { flex-wrap: wrap; border-radius: 22px; }
  #edit-dialog .fin-seg button { flex: 1 1 40%; }
  #edit-dialog .cf-field > :is(input, select, textarea), #edit-dialog .cf-input input, #edit-dialog .cf-search input, #edit-dialog .cf-stepper input { font-size: 16px; }
  #edit-dialog .cf-actions > div { width: 100%; }
  #edit-dialog .cf-actions > div > * { flex: 1 1 0; }
  #edit-dialog .cf-results { max-height: 36dvh; }
}
@media (prefers-reduced-motion: reduce) {
  #edit-dialog :is(.cf-pop, .cf-card, .cf-bottle) { animation: none !important; }
  #edit-dialog :is(.cf-search, .cf-input, .cf-chips button, .cf-house-row button, .cf-res, .cf-stepper, .fin-seg button) { transition: none !important; }
}
html[data-motion=off] #edit-dialog :is(.cf-pop, .cf-card, .cf-bottle) { animation: none !important; }
html[data-motion=off] #edit-dialog :is(.cf-search, .cf-input, .cf-chips button, .cf-house-row button, .cf-res, .cf-stepper, .fin-seg button) { transition: none !important; }

/* ---- a bottle that is not in the catalog: its photo, and asking for it to be added ---- */
.cf-custom { display: grid; gap: 14px; margin-top: 16px; padding: 16px 18px; border: 1px dashed color-mix(in srgb, var(--accent-color) 45%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--accent-color) 5%, transparent); }
.cf-custom-head { display: grid; gap: 3px; }
.cf-custom-head strong { font-size: .92rem; color: var(--ink); }
.cf-custom-head span { font-size: .8rem; line-height: 1.5; color: var(--muted); }
.cf-photo-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cf-photo-preview { position: relative; display: grid; place-items: center; flex: 0 0 88px; width: 88px; height: 88px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-card); color: var(--muted); overflow: hidden; }
.cf-photo-preview svg { width: 30px; height: 30px; }
.cf-photo-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cf-photo-preview.has-photo svg { display: none; }
.cf-photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cf-photo-actions button[hidden] { display: none; }
.cf-ask { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); cursor: pointer; transition: border-color .2s, background .2s; }
.cf-ask:hover { border-color: var(--accent-color); }
.cf-ask input { flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent-color); }
.cf-ask span { display: grid; gap: 3px; min-width: 0; }
.cf-ask strong { font-size: .86rem; color: var(--ink); }
.cf-ask small { font-size: .76rem; line-height: 1.5; color: var(--muted); }
.cf-ask.is-sent { cursor: default; border-color: color-mix(in srgb, #2f8f5b 50%, var(--line)); background: color-mix(in srgb, #2f8f5b 7%, var(--bg-card)); }
.cf-custom-status { margin: 0; min-height: 1.1em; font-size: .78rem; color: var(--muted); }
.cf-custom-status:empty { display: none; }

/* the collection card for such a bottle */
.item-own-photo { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--bg-surface, var(--soft)); }
.item-own-photo img { width: 100%; height: 100%; object-fit: cover; }
.item-request { margin-top: 6px; }
.req-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; background: color-mix(in srgb, var(--accent-color) 13%, transparent); color: var(--ink); font: 700 .66rem/1.3 system-ui, sans-serif; letter-spacing: .03em; }
.req-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-color); }
.req-chip[data-status=reviewing] { background: color-mix(in srgb, #c98a1b 20%, transparent); }
.req-chip[data-status=reviewing]::before { background: #c98a1b; }
.req-chip[data-status=added] { background: color-mix(in srgb, #2f8f5b 18%, transparent); }
.req-chip[data-status=added]::before { background: #2f8f5b; }
.req-chip[data-status=declined] { background: color-mix(in srgb, var(--muted) 16%, transparent); }
.req-chip[data-status=declined]::before { background: var(--muted); }
.req-ask { font-size: .78rem; }