/* --- The scan button that follows you around, and its sheet -----------------
   See js/quick-scan.js. `.qs-` and `#quickScan` are this file's alone.

   z-index 58 is chosen, not arbitrary: above the routed pages (55) so it's
   there on the pantry and the planner too, below the overlays (60) so the
   scanner it opens covers it, and below the sidebar (70). */

#quickScan {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 58;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px 13px 17px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 13.5px;
  font-weight: 750;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--accent) 60%, transparent),
              0 2px 6px -2px rgba(13,16,28,.28);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
#quickScan:hover { background: var(--accent-hover); transform: translateY(-2px); }
#quickScan:active { transform: none; }
#quickScan .ic { width: 18px; height: 18px; flex: none; }

/* On a phone it's a thumb target, not a label — and it lifts clear of the
   selection tray, which owns the bottom of the screen when it's showing. */
@media (max-width: 640px) {
  #quickScan { right: 14px; bottom: 86px; padding: 15px; }
  #quickScan span { display: none; }
  #quickScan .ic { width: 21px; height: 21px; }
  /* the cook bar is bottom-left and grows to meet it — give it a stop */
  body #cookBar { max-width: calc(100vw - var(--sbw) - 104px); }
}

/* ---------- what the scan will do, chosen before you scan ---------- */
.qs-modes {
  display: flex;
  gap: 4px;
  margin: 0 28px 12px;
  padding: 4px;
  background: var(--surface-3);
  border-radius: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.qs-modes::-webkit-scrollbar { display: none; }
.qs-modes button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.qs-modes button:hover { color: var(--text); }
.qs-modes button.on {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-card);
  cursor: default;
}
.qs-modes button .ic { width: 15px; height: 15px; flex: none; }

@media (max-width: 560px) {
  .qs-modes { margin: 0 18px 10px; }
  .qs-modes button { padding: 9px 8px; font-size: 11.5px; }
  .qs-modes button span { display: none; }
  .qs-modes button.on span { display: inline; }
}

/* ---------- finding one by name, in the same sheet ---------- */
.qs-find { padding: 6px 28px 0; }
.qs-find input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 10px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
}
.qs-find input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

.qs-hits { display: none; flex-direction: column; gap: 5px; margin-top: 8px; }
.qs-hits.show { display: flex; }

.qs-hit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}
.qs-hit .qs-open {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 9px;
  text-align: left;
  background: none;
  cursor: pointer;
  border-radius: 8px;
}
.qs-hit .qs-open:hover { background: var(--surface-3); }
.qs-hit .qs-open b {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qs-hit .qs-open small { font-size: 11px; color: var(--text-muted); }

.qs-act {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.qs-act:hover { background: var(--accent-hover); }
.qs-act.ghost {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
}
.qs-act.ghost:hover { background: var(--surface-3); color: var(--text); }
.qs-act .ic { width: 14px; height: 14px; }

.qs-none {
  padding: 9px 4px 2px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}
.qs-link {
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  color: var(--accent);
  background: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.qs-link:hover { color: var(--accent-hover); }