/* Stage 11 premium finish — mobile-first planning, saved-trip editing, and balanced destructive actions. */

:root {
  --planning-gap: 16px;
  --planning-border: color-mix(in srgb, var(--stone) 28%, transparent);
}

/* Premium paired controls: true two-column components with complete borders and breathing room. */
.compact-date-row,
.premium-pair-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--planning-gap) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.compact-date-row > .field-label,
.premium-pair-row > .field-label {
  display: grid !important;
  grid-template-rows: auto 56px;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
}
.compact-date-row .text-control,
.compact-date-row input[type="date"],
.compact-date-row input[type="time"],
.premium-pair-row .text-control,
.premium-pair-row input[type="date"],
.premium-pair-row input[type="time"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--planning-border) !important;
  border-radius: 16px !important;
  background: var(--card) !important;
  box-sizing: border-box !important;
  color: var(--charcoal) !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.compact-date-row .text-control:focus,
.premium-pair-row .text-control:focus {
  border-color: var(--alpine) !important;
  outline: 2px solid color-mix(in srgb, var(--alpine) 18%, transparent) !important;
  outline-offset: 2px;
}

.plan-editor form {
  padding: 20px !important;
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  overflow: visible !important;
}
.plan-date-row { margin-bottom: 26px !important; }
.plan-editor .participant-fieldset { margin-top: 0; }
.plan-editor .planned-meta { font-size: 16px; }

/* The saved Adventure should read as one deliberate card, then breathe before recommendations. */
.swipe-delete-shell:has(.planned-card) { margin-bottom: 30px; }
.planned-card__body > h2 + .planned-meta {
  margin-top: 8px !important;
  color: var(--charcoal) !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  letter-spacing: .005em;
}
.planned-card__participants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}
.planned-person {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 11px 6px 6px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 92%, var(--subtle));
  font-size: 15px;
  font-weight: 800;
}
.planned-person .participant-avatar { width: 34px; height: 34px; font-size: 15px; }
.planned-card__actions { margin-top: 17px; gap: 10px; }
.premium-edit-action {
  appearance: none;
  border: 1px solid var(--divider);
  border-radius: var(--radius-control);
  background: var(--card);
  color: var(--charcoal);
  padding: 11px 15px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

/* Multi-day planner: every day is a complete, consistent card. */
.trip-form-grid { gap: 22px !important; overflow: visible !important; }
.trip-range-row { margin-top: 4px; }
.trip-days-editor { margin-top: 32px; }
.trip-day-editor {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
  padding: 20px !important;
  border: 1px solid var(--planning-border) !important;
  border-radius: 22px !important;
  background: var(--card) !important;
  box-shadow: 0 8px 24px rgba(34,42,35,.035);
  overflow: visible !important;
}
.trip-day-editor + .trip-day-editor { margin-top: 16px; }
.trip-day-editor > span {
  margin: 0 !important;
  color: var(--stone);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.trip-day-editor .trip-day-trail,
.trip-day-editor .trip-day-note {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.trip-day-editor .trip-day-trail .text-control,
.trip-day-editor .trip-day-note .text-control {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--planning-border) !important;
  border-radius: 16px !important;
  background: var(--card) !important;
}
.trip-day-editor .trip-day-trail .text-control { height: 56px !important; }
.trip-day-editor .trip-day-note .text-control { height: 52px !important; }
.trip-day-when {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--planning-gap) !important;
  min-width: 0 !important;
  overflow: visible !important;
}
.trip-day-remove,
.trip-day-delete {
  justify-self: end !important;
  min-height: 30px !important;
  padding: 4px 2px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--stone) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* Saved multi-day rows use the SAME swipe language as the successful single planned Adventure. */
.latent-trip-item.swipe-delete-shell,
.trip-detail-swipe.swipe-delete-shell {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: var(--radius-card) !important;
  background: var(--clay) !important;
}
.latent-trip-item .latent-trip-open,
.trip-detail-swipe .trip-detail-identity {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--card) !important;
}
.latent-trip-item .latent-trip-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  min-height: 76px;
  padding: 15px 16px !important;
  border-radius: inherit;
}
.latent-trip-open strong {
  font-size: 17px;
  line-height: 1.15;
  text-align: left;
}
.latent-trip-open small {
  color: var(--charcoal) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .005em;
  text-align: right;
  white-space: nowrap;
}
.latent-trip-item .swipe-delete-action,
.trip-detail-swipe .swipe-delete-action {
  position: absolute !important;
  z-index: 1 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 86px !important;
  height: auto !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--clay) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-align: center !important;
}
.latent-trip-item.is-revealed > .swipe-delete-content,
.trip-detail-swipe.is-revealed > .swipe-delete-content { transform: translateX(-86px) !important; }
.trip-detail-swipe { margin: 10px 0 20px; }
.trip-detail-swipe .trip-detail-identity { padding: 18px !important; border-radius: inherit; }
.trip-detail-range {
  margin: 8px 0 12px;
  color: var(--charcoal);
  font-size: 17px;
  font-weight: 850;
  letter-spacing: .005em;
}
.trip-edit-row { display: flex; justify-content: flex-end; margin: 0 0 18px; }

/* Participant identity inside saved Trips. */
.trip-people {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.trip-person {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px 5px 5px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 92%, var(--subtle));
  color: var(--charcoal);
  font-size: 13px;
  font-weight: 800;
}
.trip-person .participant-avatar { width: 30px; height: 30px; font-size: 13px; }
.trip-day-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.trip-day-heading > span {
  color: var(--stone);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.trip-day-heading > strong {
  color: var(--charcoal);
  font-size: 15px;
  font-weight: 850;
}
.trip-day-time {
  margin: 4px 0 0;
  color: var(--charcoal) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
}
.trip-day-card {
  border: 1px solid var(--divider) !important;
  box-shadow: 0 6px 20px rgba(34,42,35,.028);
}

/* Family initial avatars should carry identity even without a photo. */
.family-card-avatar {
  width: 64px !important;
  height: 64px !important;
  font-size: 26px !important;
  font-weight: 850 !important;
}
.family-card-avatar > span {
  font-size: 26px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}
.family-filter-avatar,
.family-filter-avatar > span {
  font-size: 18px !important;
  font-weight: 850 !important;
}
.family-profile-avatar,
.family-profile-avatar > span {
  font-size: 34px !important;
  font-weight: 850 !important;
}

/* Sierra Days destructive confirmation — compact, branded, and deliberate. */
.premium-confirm-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 18px;
  background: rgba(31,31,28,.34);
  backdrop-filter: blur(3px);
}
.premium-confirm-sheet {
  width: min(100%, 440px);
  padding: 20px;
  border: 1px solid var(--divider);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 22px 70px rgba(0,0,0,.18);
}
.premium-confirm-sheet .eyebrow { margin-bottom: 6px; }
.premium-confirm-sheet h3 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 600; }
.premium-confirm-sheet p { margin: 9px 0 18px; color: var(--stone); line-height: 1.5; }
.premium-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.premium-confirm-delete { border: 0; border-radius: var(--radius-control); background: var(--clay); color: #fff; padding: 12px 15px; font: inherit; font-weight: 800; }

/* Premium edit surfaces reuse the planning language without creating a second visual system. */
.premium-editor { padding-bottom: 28px; }
.premium-editor form { display: grid; gap: 22px; padding: 20px; border: 1px solid var(--divider); border-radius: var(--radius-card); background: var(--card); }
.premium-editor .participant-selector { margin-top: 8px; }
.premium-editor .editor-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.premium-editor .trip-day-editor { padding: 18px !important; }

@media (max-width: 470px) {
  :root { --planning-gap: 14px; }
  .plan-editor form,
  .premium-editor form { padding: 16px !important; }
  .compact-date-row .text-control,
  .premium-pair-row .text-control { padding: 0 8px !important; font-size: 15px !important; }
  .trip-day-editor { padding: 16px !important; }
  .latent-trip-item .latent-trip-open { grid-template-columns: minmax(0, 1fr) auto; }
  .latent-trip-open small { font-size: 14px !important; }
  .trip-day-heading { align-items: flex-start; }
}