/* SearchOverlay — public/css/components/search-overlay.css
   Canopy v2 tokens only. Mirrors seeds-filter-panel structure.
   Spec: docs/superpowers/specs/2026-04-30-search-overlay-design.md
*/

/* Root overlay container — full viewport, pointer-events managed per child */
.so-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

/* Picker mode opens FROM inside another modal (e.g. seed-form-overlay z=1000),
   so it must layer above. */
.so-root--picker {
  z-index: 1100;
}

/* Scrim — same rgba as seeds filter sheet */
.so-scrim {
  position: absolute;
  inset: 0;
  background: rgba(44, 41, 38, 0.32);
  pointer-events: all;
  transition: opacity 220ms ease;
}

/* Sheet — tall, home peeks above at ~88px */
.so-sheet {
  position: absolute;
  top: 88px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--v2-bg-panel);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 28px oklch(0% 0 0 / 0.45), 0 -1px 3px oklch(0% 0 0 / 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: all;
  transform: translateY(0);
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.25, 1);
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  will-change: transform;
}

/* Handle — exact seeds-filter-grabber spec */
.so-handle {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: rgba(118, 113, 105, 0.28);
  margin: 8px auto 10px;
  flex-shrink: 0;
}

/* Header */
.so-header {
  padding: 0 16px 10px;
  flex-shrink: 0;
}

.so-eyebrow {
  font-family: var(--v2-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-text-tertiary);
  margin-bottom: 2px;
}

.so-title {
  font-family: var(--v2-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--v2-text-primary);
  line-height: 1.2;
}

.so-rule {
  height: 1px;
  background: rgba(118, 113, 105, 0.12);
  margin-top: 10px;
}

/* Search input — matches #plant-search: pill 9999px, 44px, 1.5px border */
.so-search-wrap {
  padding: 10px 14px 0;
  flex-shrink: 0;
}

.so-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  border-radius: 9999px;
  background: var(--v2-bg-secondary);
  border: 1.5px solid var(--v2-edge);
  padding: 0 14px;
  transition: border-color var(--v2-transition-fast), box-shadow var(--v2-transition-fast);
}

.so-search-bar:focus-within {
  border-color: var(--v2-accent-botanical);
  box-shadow: 0 0 0 3px var(--v2-pop-sage-bg);
}

.so-search-icon {
  width: 15px;
  height: 15px;
  stroke: var(--v2-text-tertiary);
  flex-shrink: 0;
}

.so-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  /* iOS Safari draws default `appearance: searchfield` chrome (inset rounded-rect)
     under our styles unless explicitly suppressed. Same for the UA cancel button. */
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--v2-font-body);
  font-size: 0.9rem;
  color: var(--v2-text-primary);
}

.so-search-input::-webkit-search-cancel-button,
.so-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.so-search-input::placeholder {
  color: var(--v2-text-muted);
}

/* Filter chips — pill style, matches seeds-filter-chip: 999px, 38px, 0.86rem, 500 */
.so-chips {
  display: flex;
  gap: 6px;
  padding: 10px 14px 0;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.so-chips::-webkit-scrollbar { display: none; }

.so-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--v2-bg-secondary);
  color: var(--v2-text-secondary);
  font-family: var(--v2-font-body);
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--v2-transition-fast), color var(--v2-transition-fast),
              border-color var(--v2-transition-fast), box-shadow var(--v2-transition-fast);
}

.so-chip.is-active {
  background: var(--v2-bg-panel);
  border-color: var(--v2-accent-botanical);
  color: var(--v2-accent-botanical);
  font-weight: 600;
  box-shadow: var(--v2-elev-1);
}

/* Section label */
.so-sec-lbl {
  font-family: var(--v2-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-text-tertiary);
  padding: 9px 16px 3px;
  flex-shrink: 0;
}

.so-divider {
  height: 1px;
  background: var(--v2-border-soft);
  margin: 0 16px 5px;
  flex-shrink: 0;
}

/* Scrollable seed list */
.so-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Seed row — 44×44 touch target */
.so-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 9px 10px;
  min-height: 44px;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border-soft);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--v2-transition-fast);
}

.so-row:active {
  background: var(--v2-bg-card-hover);
}

/* Thumb — 44×44, 10px radius, photo via background-image */
.so-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--v2-bg-secondary);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.so-info {
  flex: 1;
  min-width: 0;
}

.so-name {
  font-family: var(--v2-font-display);
  font-size: 1.0rem;
  font-weight: 400;
  color: var(--v2-text-primary);
  line-height: 1.2;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.so-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.so-day {
  font-family: var(--v2-font-body);
  font-size: 0.75rem;
  color: var(--v2-text-tertiary);
}

/* Stage pills — --pop-* semantic tokens */
.so-stage-pill {
  font-family: var(--v2-font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Sub-wave 2 — canonical 8-stage taxonomy. so-stage-planted now means
   in-ground (Alt C). Pre-transplant stages (sowed/cutting/nursery-start)
   share the ochre warm-earth color used by all started-but-not-yet-rooted
   batches; potted-up gets sage; planted in-ground gets sage too (positive
   milestone). */
.so-stage-sowed         { background: var(--v2-pop-ochre-bg);  color: var(--v2-pop-ochre); }
.so-stage-cutting       { background: var(--v2-pop-ochre-bg);  color: var(--v2-pop-ochre); }
.so-stage-nursery-start { background: var(--v2-pop-ochre-bg);  color: var(--v2-pop-ochre); }
.so-stage-germinated    { background: var(--v2-pop-sage-bg);   color: var(--v2-pop-sage); }
.so-stage-potted-up     { background: var(--v2-pop-sage-bg);   color: var(--v2-pop-sage); }
.so-stage-planted       { background: var(--v2-pop-sage-bg);   color: var(--v2-accent-botanical-dark); }
.so-stage-failed        { background: var(--v2-pop-coral-bg);  color: var(--v2-pop-coral); }
.so-stage-removed       { background: var(--v2-pop-slate-bg);  color: var(--v2-pop-slate); }

.so-chev {
  width: 14px;
  height: 14px;
  stroke: var(--v2-text-muted);
  flex-shrink: 0;
}

/* Empty state */
.so-empty {
  font-family: var(--v2-font-body);
  font-size: 0.875rem;
  color: var(--v2-text-tertiary);
  text-align: center;
  padding: 24px 16px;
}

/* ── Picker mode (S2 #366) ──────────────────────────────────────────────── */

/* Plant rows: no photo thumbnail; use a botanical glyph instead */
.so-thumb--plant {
  background: var(--v2-pop-sage-bg);
  position: relative;
}

.so-thumb--plant::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d7050' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22V12'/><path d='M12 12c-3.5 0-6-2.5-6-6 3.5 0 6 2.5 6 6z'/><path d='M12 12c3.5 0 6-2.5 6-6-3.5 0-6 2.5-6 6z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  opacity: 0.85;
}

/* Current-selection row gets a sage tint + check mark */
.so-row--plant.is-current {
  background: var(--v2-pop-sage-bg);
  border-color: var(--v2-pop-sage);
}

.so-check {
  width: 18px;
  height: 18px;
  stroke: var(--v2-pop-sage);
  flex-shrink: 0;
}

/* Visually-hidden util — for aria-live announcers (kept off-screen, still readable by SR) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pinned "Add new plant" row — variant A: always visible at top of plant list */
.so-pinned-add {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed var(--v2-pop-sage);
  background: var(--v2-pop-sage-bg);
  color: var(--v2-pop-sage);
  font-family: var(--v2-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--v2-transition-fast), transform var(--v2-transition-fast);
  margin-bottom: 6px;
}

.so-pinned-add:active {
  transform: scale(0.99);
  background: var(--v2-bg-card-hover);
}

.so-pinned-add-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--v2-bg-panel);
  border: 1px solid var(--v2-pop-sage);
  flex-shrink: 0;
}

.so-pinned-add-ico svg {
  width: 18px;
  height: 18px;
}

.so-pinned-add-text {
  flex: 1;
}

/* Zero-results CTA — sage-tinted block per mockup scene 8 */
.so-empty-cta {
  margin: 16px 6px 12px;
  padding: 20px 16px;
  background: var(--v2-pop-sage-bg);
  border: 1px solid var(--v2-pop-sage);
  border-radius: 14px;
  text-align: center;
}

.so-empty-cta-msg {
  font-family: var(--v2-font-body);
  font-size: 0.875rem;
  color: var(--v2-text-secondary);
  margin-bottom: 12px;
}

.so-empty-cta-btn {
  display: inline-block;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  background: var(--v2-pop-sage);
  color: var(--v2-bg-panel);
  font-family: var(--v2-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.so-empty-cta-quoted {
  font-family: var(--v2-font-display);
  font-style: italic;
  font-weight: 500;
}

/* Inline-create view (scenes 9-10) — replaces list area when active */
.so-sheet[data-view="create"] .so-header,
.so-sheet[data-view="create"] .so-search-wrap,
.so-sheet[data-view="create"] .so-sec-lbl,
.so-sheet[data-view="create"] .so-divider,
.so-sheet[data-view="create"] .so-list {
  display: none;
}

.so-create {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px 16px;
  display: flex;
  flex-direction: column;
}

.so-create-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.so-create-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--v2-edge);
  background: var(--v2-bg-secondary);
  color: var(--v2-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.so-create-back svg {
  width: 20px;
  height: 20px;
}

.so-create-title {
  flex: 1;
  margin: 0;
  font-family: var(--v2-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--v2-text-primary);
  line-height: 1.25;
}

.so-create-field {
  margin-bottom: 16px;
}

.so-create-label {
  display: block;
  font-family: var(--v2-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--v2-text-secondary);
  margin-bottom: 6px;
}

.so-create-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--v2-edge);
  background: var(--v2-bg-secondary);
  color: var(--v2-text-primary);
  font-family: var(--v2-font-body);
  font-size: 0.95rem;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--v2-transition-fast), box-shadow var(--v2-transition-fast);
}

.so-create-input:focus-visible {
  outline: none;
  border-color: var(--v2-accent-botanical);
  box-shadow: 0 0 0 3px var(--v2-pop-sage-bg);
}

.so-create-input:disabled {
  background: var(--v2-bg-secondary);
  color: var(--v2-text-tertiary);
  opacity: 0.7;
}

.so-create-helper {
  font-family: var(--v2-font-body);
  font-size: 0.78rem;
  color: var(--v2-text-tertiary);
  margin-top: 6px;
}

.so-create-error {
  font-family: var(--v2-font-body);
  font-size: 0.85rem;
  color: var(--v2-pop-coral);
  background: var(--v2-pop-coral-bg);
  border: 1px solid var(--v2-pop-coral);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.so-create-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.so-create-cancel,
.so-create-save {
  flex: 1;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  font-family: var(--v2-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity var(--v2-transition-fast);
}

.so-create-cancel {
  border: 1.5px solid var(--v2-edge);
  background: var(--v2-bg-secondary);
  color: var(--v2-text-secondary);
}

.so-create-save {
  border: none;
  background: var(--v2-pop-sage);
  color: var(--v2-bg-panel);
}

.so-create-cancel:disabled,
.so-create-save:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.so-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: so-spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes so-spin {
  to { transform: rotate(360deg); }
}

/* Picker button on the seed form — tap target replacing native <select> */
.form-picker-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--v2-edge);
  background: var(--v2-bg-secondary);
  color: var(--v2-text-primary);
  font-family: var(--v2-font-body);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--v2-transition-fast), box-shadow var(--v2-transition-fast);
}

.form-picker-button:focus-visible {
  outline: none;
  border-color: var(--v2-accent-botanical);
  box-shadow: 0 0 0 3px var(--v2-pop-sage-bg);
}

.form-picker-button[data-empty="true"] {
  color: var(--v2-text-muted);
}

.form-picker-button .form-picker-chev {
  width: 16px;
  height: 16px;
  stroke: var(--v2-text-tertiary);
  flex-shrink: 0;
}

/* FAB search button — ghost circle, same size as + FAB */
#fab-search {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: var(--v2-bg-panel);
  border: 1px solid var(--v2-edge);
  color: var(--v2-accent-botanical);
  box-shadow: var(--v2-elev-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--v2-transition-fast), transform var(--v2-transition-fast);
}

#fab-search:active {
  transform: scale(0.94);
  background: var(--v2-bg-card-hover);
}

/* ---------------------------------------------------------------
   S3a: SearchOverlay picker-mode footer.
   "Not finding it? Tap + below to add" — always visible, signals
   that the global FAB popout is where new-plant creation lives.
   v2 tokens only.
   --------------------------------------------------------------- */
.so-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0));
  margin-top: auto;
  font-family: var(--v2-font-body, 'DM Sans', sans-serif);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--v2-text-muted, #7a7066);
  border-top: 1px solid var(--v2-border-soft, rgba(0, 0, 0, 0.05));
  background: var(--v2-bg-surface, #fbf8f3);
}

.so-footnote-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--v2-accent-soft, rgba(164, 91, 72, 0.12));
  color: var(--v2-accent, #a45b48);
  font-family: var(--v2-font-body, 'DM Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}