/* Itinerary Proposals — feature-flagged UI (see js/features/itinerary-proposals/) */

/* Hidden by default; itinerary-proposals.js only reveals this once it
   confirms the backend has FEATURE_ITINERARY_PROPOSALS=true. Safe to leave
   this markup in index.html indefinitely even while the feature is off.
   Content styling (.agent-history-entry, .agent-diff-row, etc.) is reused
   verbatim from css/features/itinerary-agent.css — those classes are
   generic, not itinerary-agent-specific, and that stylesheet is always
   loaded regardless of which feature flags are on. */
.feature-itinerary-proposals {
  display: none;
}

/* ── Sandbox editor (issue #353) ─────────────────────────────────────── */

.proposal-seed-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.proposal-clone-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.proposal-clone-option {
  width: 100%;
  justify-content: flex-start;
}

.proposal-entry-note {
  font-size: var(--fs-sm);
  color: var(--df-ink-soft);
  margin-bottom: var(--space-sm);
}

.proposal-list-group-label {
  font-family: var(--df-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--df-ink-soft);
  margin: var(--space-lg) 0 var(--space-sm);
}

.proposal-editor-title-input {
  /* No own font-size (issue #446) — see css/style.css's shared input rule
     and its @media (max-width: 680px) 16px bump; an override here beat
     that bump and re-triggered the iOS Safari auto-zoom-on-focus bug. */
  width: 100%;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.proposal-editor-note-input {
  width: 100%;
  height: 50px;
  margin-bottom: var(--space-md);
}

.proposal-editor-summary {
  font-size: var(--fs-sm);
  color: var(--df-ink-soft);
  margin-bottom: var(--space-sm);
}

.proposal-editor-stops {
  max-height: 40vh;
  overflow-y: auto;
  margin-bottom: var(--space-md);
}

.proposal-editor-stop-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--fs-base);
  padding: var(--space-xs) 0;
  border-bottom: 2px solid var(--df-hair);
  flex-wrap: wrap;
}

.proposal-editor-stop-drag {
  cursor: grab;
  color: var(--df-ink-soft);
  touch-action: none;
}

.proposal-editor-stop-day {
  color: var(--df-ink-soft);
  font-size: var(--fs-xs);
  min-width: 48px;
}

.proposal-editor-stop-time {
  color: var(--df-ink-soft);
  min-width: 48px;
  font-variant-numeric: tabular-nums;
}

.proposal-editor-stop-dest {
  font-weight: 600;
  flex: 1;
}

.proposal-editor-stop-edit {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--df-ink-soft);
  font-size: var(--fs-base);
  padding: 0 var(--space-xs);
  line-height: 1;
}

.proposal-editor-stop-edit:hover {
  color: var(--vn-teal);
}

.proposal-editor-stop-del {
  background: var(--df-panel);
  border: 2px solid var(--df-ink);
  color: var(--df-ink-soft);
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  line-height: 1;
  flex-shrink: 0;
}

.proposal-editor-stop-del:hover {
  background: var(--vn-coral-light);
  border-color: var(--vn-coral-mid);
  color: var(--vn-coral);
}

.proposal-editor-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--df-ground);
  border-radius: var(--df-radius-stub);
}

.proposal-editor-day-input,
.proposal-editor-field {
  width: 100%;
}

.proposal-editor-time-row {
  display: flex;
  gap: var(--space-sm);
}

.proposal-editor-time-row select {
  flex: 1;
}

.proposal-editor-form-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.proposal-editor-form-actions button {
  flex: 1;
}

.proposal-editor-add-btn {
  margin-top: var(--space-md);
}

.proposal-editor-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.proposal-editor-actions button {
  flex: 1;
}