/*
 * easy-add-v1 — CSS for appellation nudge, placement preview card, and
 * provenance (acquisition) section on the Add / Edit Wine form.
 *
 * Plan: docs/plans/easy-add-v1.md §4.1 / §4.2 / §4.3.
 */

/* ============================================================
 * §4.1 — Appellation nudge banner
 * ============================================================ */

.easy-add-nudge-mount {
  /* Spacing only; the banner carries its own chrome. */
  margin: 12px 0;
}

.easy-add-nudge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--color-info-bg, #eef4fb);
  border: 1px solid var(--color-info-border, #b9d3ee);
  border-left: 4px solid var(--color-info-accent, #1f77b4);
  border-radius: var(--radius-md);
  color: var(--color-text-primary, #2c2c2c);
  font-size: 0.95rem;
  line-height: 1.4;
}

.easy-add-nudge-body {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
}

.easy-add-nudge-icon {
  flex: 0 0 auto;
  font-size: 1.1rem;
}

.easy-add-nudge-text {
  flex: 1 1 auto;
  overflow-wrap: break-word;
}

.easy-add-nudge-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.easy-add-nudge-ai,
.easy-add-nudge-dismiss {
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  min-height: 36px; /* touch target */
}

.easy-add-nudge-ai {
  background: var(--color-primary, #1f77b4);
  color: #fff;
  border-color: var(--color-primary, #1f77b4);
}

.easy-add-nudge-ai:hover,
.easy-add-nudge-ai:focus {
  background: var(--color-primary-hover, #165a8d);
  outline: 2px solid var(--color-focus, #ffbf47);
  outline-offset: 2px;
}

.easy-add-nudge-dismiss {
  background: transparent;
  border-color: var(--color-border, #bbb);
  color: var(--color-text-primary, #2c2c2c);
}

.easy-add-nudge-dismiss:hover,
.easy-add-nudge-dismiss:focus {
  background: var(--color-neutral-bg-hover, #e8e8e8);
  outline: 2px solid var(--color-focus, #ffbf47);
  outline-offset: 2px;
}

/* ============================================================
 * Gap B (2026-04-24) — Vintage-alias prefill card
 * Appears when the user adds a new vintage of a wine they already own.
 * ============================================================ */

.vintage-alias-mount {
  margin: 8px 0;
}

.vintage-alias-card {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--color-success-bg, #eef7ee);
  border: 1px solid var(--color-success-border, #a6d4a6);
  border-left: 4px solid var(--color-success-accent, #2e7d32);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--color-text-primary, #2c2c2c);
}

.vintage-alias-card-body {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
}

.vintage-alias-card-icon {
  flex: 0 0 auto;
  font-size: 1.1rem;
}

.vintage-alias-card-text {
  flex: 1 1 auto;
  overflow-wrap: break-word;
}

.vintage-alias-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.vintage-alias-card-yes,
.vintage-alias-card-no {
  font-size: 0.88rem;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  min-height: 36px;
}

.vintage-alias-card-yes {
  background: var(--color-success-accent, #2e7d32);
  color: #fff;
  border-color: var(--color-success-accent, #2e7d32);
}

.vintage-alias-card-yes:hover,
.vintage-alias-card-yes:focus {
  background: var(--color-success-accent-hover, #1e6b23);
  outline: 2px solid var(--color-focus, #ffbf47);
  outline-offset: 2px;
}

.vintage-alias-card-no {
  background: transparent;
  border-color: var(--color-border, #bbb);
  color: var(--color-text-primary, #2c2c2c);
}

.vintage-alias-card-no:hover,
.vintage-alias-card-no:focus {
  background: var(--color-neutral-bg-hover, #e8e8e8);
  outline: 2px solid var(--color-focus, #ffbf47);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .vintage-alias-card {
    flex-direction: column;
    align-items: stretch;
  }
  .vintage-alias-card-actions {
    justify-content: stretch;
  }
  .vintage-alias-card-yes,
  .vintage-alias-card-no {
    flex: 1 1 auto;
  }
}

/* ============================================================
 * Wine-name-quality Layer 2 (2026-04-24) — Producer canonicalisation card
 * Fires when a typed producer fuzzy-matches an existing cellar producer.
 * Precedence: vintage-alias > producer-canon; never both at once.
 * ============================================================ */

.producer-canon-mount {
  margin: 8px 0;
}

.producer-canon-card {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--color-info-bg, #eef4fb);
  border: 1px solid var(--color-info-border, #b9d3ee);
  border-left: 4px solid var(--color-info-accent, #1f77b4);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--color-text-primary, #2c2c2c);
}

.producer-canon-card-body {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}

.producer-canon-card-icon {
  flex: 0 0 auto;
  font-size: 1.1rem;
}

.producer-canon-card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.producer-canon-card-title {
  font-weight: 600;
}

.producer-canon-card-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9rem;
}

.producer-canon-card-option {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.producer-canon-card-option--canonical {
  color: var(--color-success-accent, #2e7d32);
}

.producer-canon-card-option--typed {
  color: var(--color-text-secondary, #666);
  font-size: 0.85rem;
}

.producer-canon-card-typed-label {
  color: var(--color-text-secondary, #888);
  font-style: italic;
}

.producer-canon-card-count {
  color: var(--color-text-secondary, #666);
  font-size: 0.85em;
}

.producer-canon-card-wnrewrite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--color-text-secondary, #555);
  cursor: pointer;
}

.producer-canon-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.producer-canon-card-apply,
.producer-canon-card-keep,
.producer-canon-card-distinct {
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  min-height: 36px;
}

.producer-canon-card-apply {
  background: var(--color-primary, #1f77b4);
  color: #fff;
  border-color: var(--color-primary, #1f77b4);
}

.producer-canon-card-apply:hover,
.producer-canon-card-apply:focus {
  background: var(--color-primary-hover, #165a8d);
  outline: 2px solid var(--color-focus, #ffbf47);
  outline-offset: 2px;
}

.producer-canon-card-keep,
.producer-canon-card-distinct {
  background: transparent;
  border-color: var(--color-border, #bbb);
  color: var(--color-text-primary, #2c2c2c);
}

.producer-canon-card-keep:hover,
.producer-canon-card-keep:focus,
.producer-canon-card-distinct:hover,
.producer-canon-card-distinct:focus {
  background: var(--color-neutral-bg-hover, #e8e8e8);
  outline: 2px solid var(--color-focus, #ffbf47);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .producer-canon-card {
    flex-direction: column;
    align-items: stretch;
  }
  .producer-canon-card-actions {
    justify-content: stretch;
  }
  .producer-canon-card-apply,
  .producer-canon-card-keep,
  .producer-canon-card-distinct {
    flex: 1 1 auto;
  }
}

/* ============================================================
 * Gap A (2026-04-24) — Type-it-in auto-research card
 * Appears on wine-name blur when the appellation nudge didn't match.
 * ============================================================ */

.type-in-research-mount {
  margin: 8px 0;
}

.type-in-research-card {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--color-info-bg, #eef4fb);
  border: 1px solid var(--color-info-border, #b9d3ee);
  border-left: 4px solid var(--color-info-accent, #1f77b4);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--color-text-primary, #2c2c2c);
}

.type-in-research-card--loading {
  font-style: italic;
  color: var(--color-text-secondary, #555);
}

.type-in-research-body {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}

.type-in-research-icon {
  flex: 0 0 auto;
  font-size: 1.1rem;
}

.type-in-research-content {
  flex: 1 1 auto;
}

.type-in-research-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.type-in-research-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.type-in-research-chip {
  font-size: 0.88rem;
}

.type-in-research-chip-label {
  color: var(--color-text-secondary, #555);
  font-size: 0.8rem;
  margin-right: 2px;
}

.type-in-research-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.type-in-research-apply,
.type-in-research-dismiss {
  font-size: 0.88rem;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  min-height: 36px;
}

.type-in-research-apply {
  background: var(--color-primary, #1f77b4);
  color: #fff;
  border-color: var(--color-primary, #1f77b4);
}

.type-in-research-apply:hover,
.type-in-research-apply:focus {
  background: var(--color-primary-hover, #165a8d);
  outline: 2px solid var(--color-focus, #ffbf47);
  outline-offset: 2px;
}

.type-in-research-dismiss {
  background: transparent;
  border-color: var(--color-border, #bbb);
  color: var(--color-text-primary, #2c2c2c);
}

.type-in-research-dismiss:hover,
.type-in-research-dismiss:focus {
  background: var(--color-neutral-bg-hover, #e8e8e8);
  outline: 2px solid var(--color-focus, #ffbf47);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .type-in-research-card {
    flex-direction: column;
    align-items: stretch;
  }
  .type-in-research-actions {
    justify-content: stretch;
  }
  .type-in-research-apply,
  .type-in-research-dismiss {
    flex: 1 1 auto;
  }
}

/* ============================================================
 * §4.2 — Placement preview card
 * ============================================================ */

.placement-preview-mount {
  margin: 12px 0 0;
}

.placement-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border, #ccc);
  background: var(--color-surface, #fff);
  font-size: 0.9rem;
  line-height: 1.4;
}

.placement-preview--success {
  background: var(--color-success-bg, #eaf7ea);
  border-color: var(--color-success-border, #a6d4a6);
  border-left: 4px solid var(--color-success-accent, #2e7d32);
}

.placement-preview--warning {
  background: var(--color-warning-bg, #fdf4e0);
  border-color: var(--color-warning-border, #e0c38a);
  border-left: 4px solid var(--color-warning-accent, #b27300);
}

.placement-preview--error {
  background: var(--color-error-bg, #fceaea);
  border-color: var(--color-error-border, #e0a6a6);
  border-left: 4px solid var(--color-error-accent, #b32020);
}

.placement-preview--loading {
  color: var(--color-text-secondary, #666);
  font-style: italic;
}

.placement-preview-header {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
}

.placement-preview-icon {
  font-size: 1.05rem;
  flex: 0 0 auto;
}

.placement-preview-summary {
  color: var(--color-text-secondary, #555);
}

.placement-preview-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.placement-preview-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 0.875rem;
}

.placement-preview-row .row-label {
  min-width: 60px;
  font-weight: 600;
}

.placement-preview-row .overflow-tag {
  color: var(--color-warning-accent, #b27300);
  font-size: 0.8rem;
}

.placement-preview-empty {
  color: var(--color-text-secondary, #666);
  font-style: italic;
}

.placement-preview-warning {
  margin: 0;
  padding: 6px 8px;
  background: var(--color-warning-bg, #fdf4e0);
  border-radius: var(--radius-sm);
  color: var(--color-warning-accent, #8a5800);
}

.placement-preview-hint {
  margin: 0;
  color: var(--color-text-secondary, #555);
  font-size: 0.85rem;
}

.placement-preview-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.placement-preview-actions button {
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--color-primary, #1f77b4);
  color: #fff;
  border: 1px solid var(--color-primary, #1f77b4);
  min-height: 36px;
}

.placement-preview-actions button:hover,
.placement-preview-actions button:focus {
  background: var(--color-primary-hover, #165a8d);
  outline: 2px solid var(--color-focus, #ffbf47);
  outline-offset: 2px;
}

.placement-preview-actions button[data-action="plan-rebalance"] {
  background: transparent;
  color: var(--color-primary, #1f77b4);
}

/* ============================================================
 * §4.3 — Provenance (acquisition) section
 * ============================================================ */

.provenance-section {
  border: 1px solid var(--color-border, #ccc);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 0;
}

.provenance-heading {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0 4px;
  color: var(--color-text-primary, #2c2c2c);
}

.provenance-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}

.provenance-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--color-border, #bbb);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.88rem;
  background: var(--color-surface, #fff);
  min-height: 36px;
}

.provenance-radio:hover {
  background: var(--color-neutral-bg-hover, #f2f2f2);
}

.provenance-radio input[type="radio"] {
  accent-color: var(--color-primary, #1f77b4);
  margin: 0;
}

.provenance-radio:has(input[type="radio"]:checked) {
  background: var(--color-primary-bg, #eaf2fa);
  border-color: var(--color-primary, #1f77b4);
}

.provenance-radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-focus, #ffbf47);
  outline-offset: 2px;
}

.provenance-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.provenance-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.provenance-field > span {
  font-size: 0.85rem;
  color: var(--color-text-secondary, #555);
}

.provenance-field input[type="text"],
.provenance-field input[type="date"] {
  padding: 8px 10px;
  border: 1px solid var(--color-border, #bbb);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  background: var(--color-surface, #fff);
  color: var(--color-text-primary, #2c2c2c);
}

.provenance-field input:focus-visible {
  outline: 2px solid var(--color-focus, #ffbf47);
  outline-offset: 1px;
  border-color: var(--color-primary, #1f77b4);
}

/* ============================================================
 * Mobile polish (Pieter's 390px)
 * ============================================================ */

@media (max-width: 480px) {
  .easy-add-nudge {
    flex-direction: column;
    align-items: stretch;
  }
  .easy-add-nudge-actions {
    justify-content: stretch;
  }
  .easy-add-nudge-ai,
  .easy-add-nudge-dismiss {
    flex: 1 1 auto;
  }
  .provenance-channels {
    gap: 6px;
  }
}