/* Pack-specific component styles. Tokens (:root vars, reset, .app shell)
   live in shared/tokens.css, same single source of truth as every other
   app in this suite. This app has no bottom-nav or header widgets
   (bell/search/person picker) from the rest of the suite — it's a
   genuinely separate product with its own real login, not a household
   device picker, so none of that chrome applies here. */

/* Small persistent link back to the household dashboard — added once
   Pack started being used within the family, same as the other apps'
   wordmark-links-home pattern, just without the full bell/search/person
   chrome those apps carry (Pack has its own real auth, not a device
   picker, so none of that applies here). Revisit if/when Pack starts
   inviting people outside the household as a matter of course — an
   outside guest landing on pack.ourstuff.app has no reason to see a
   link to the rest of the household's tools. */
.pack-header { padding: 14px 20px 0; max-width: 480px; margin: 0 auto; }
.back-link { font-size: 12.5px; color: var(--ink-soft); text-decoration: none; }
.back-link:hover { text-decoration: underline; }

main { padding: 20px; max-width: 480px; margin: 0 auto; }

.loading { text-align: center; color: var(--ink-soft); padding: 40px 0; }

.prompt-card, .brief-card {
  background: var(--cream-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.prompt-card h1, .trip-header h1 { font-size: 22px; margin: 0 0 6px; }
.sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; }

form label { display: block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 12px; }
form label input, form label textarea {
  display: block; width: 100%; margin-top: 5px; border: 1px solid var(--border);
  background: var(--cream-bg); border-radius: var(--r-sm); padding: 9px 11px;
  font-family: var(--font-body); font-size: 14px; color: var(--ink); box-sizing: border-box;
}
form label textarea { resize: vertical; }

.btn-primary {
  background: var(--timber); color: #fff; border: none; border-radius: var(--r-pill);
  padding: 11px 20px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-sm); width: 100%;
}
.btn-primary:disabled { opacity: 0.6; }
.btn-secondary {
  background: var(--cream-card); color: var(--timber); border: 1.5px solid var(--timber);
  border-radius: var(--r-pill); padding: 9px 16px; font-weight: 600; font-size: 13px; white-space: nowrap;
}

.form-error { color: var(--cat-terracotta); font-size: 12.5px; margin-top: 8px; }
.form-status { color: var(--cat-sage); font-size: 12.5px; margin-top: 8px; }

.trip-header { margin-bottom: 16px; }
.status-pill {
  display: inline-block; background: var(--timber-tint); color: var(--timber-dark);
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--r-pill); text-transform: capitalize;
}

.clarify-card h2, .brief-card h2 { font-size: 15px; margin: 0 0 4px; }
.ready-card p { font-size: 13px; color: var(--ink-soft); margin: 0; }

/* Itinerary/mood board/weather/advisories headings double as
   collapse toggles — these sections are the ones that grow long once a
   trip's underway and start crowding everything below them. */
.collapsible-heading {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; margin: 0 0 4px;
}
.collapsible-heading .chevron {
  font-size: 11px; color: var(--ink-soft); transition: transform var(--fast) var(--ease);
}
.collapsible-heading.collapsed .chevron { transform: rotate(-90deg); }
.collapsible-heading.collapsed { margin-bottom: 0; }

.member-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.member-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--cream-bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px;
}
.member-name { font-size: 13.5px; font-weight: 600; margin: 0; }
.member-email { font-size: 11.5px; color: var(--ink-soft); margin: 1px 0 0; }
.member-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.role-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill); }
.role-tag.owner { background: var(--cat-plum-tint); color: var(--cat-plum); }
.role-tag.editor { background: var(--cat-blue-tint); color: var(--cat-blue); }
.status-tag { font-size: 10.5px; color: var(--ink-soft); }

.invite-form { display: flex; gap: 8px; margin-top: 4px; }
.invite-form input { flex: 1; border: 1px solid var(--border); background: var(--cream-bg); border-radius: var(--r-sm); padding: 8px 10px; font-family: var(--font-body); font-size: 13px; }
/* .btn-secondary is a pill everywhere else it's used, but sitting flush
   against two square-cornered inputs in this one row it reads as visually
   mismatched — flattened to match the inputs' radius/height here only. */
.invite-form .btn-secondary { border-radius: var(--r-sm); padding: 8px 14px; flex-shrink: 0; }

.link-btn { background: none; border: none; color: var(--ink-soft); font-size: 12.5px; text-decoration: underline; padding: 8px 0; }

/* ---------- Itinerary (step 5) ---------- */
.itin-day { margin-bottom: 14px; }
.itin-day:last-child { margin-bottom: 0; }
.itin-day-heading { font-size: 13.5px; font-weight: 700; margin: 0 0 6px; }
.itin-entry-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.itin-entry {
  display: flex; align-items: center; gap: 8px; background: var(--cream-bg);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; font-size: 12.5px;
}
.itin-entry-time { color: var(--ink-soft); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.itin-entry-title { flex: 1; font-weight: 600; }
.itin-entry-location { color: var(--ink-soft); font-size: 11.5px; }
.itin-entry-remove { background: none; border: none; color: var(--ink-soft); font-size: 16px; line-height: 1; padding: 0 2px; }
.itin-entry-empty { color: var(--ink-soft); font-size: 12.5px; list-style: none; }
.itin-add-entry-form { display: flex; gap: 6px; }
.itin-add-entry-form input[name="title"] { flex: 2; }
.itin-add-entry-form input[name="start_time"] { flex: 1; }
.itin-add-entry-form input {
  border: 1px solid var(--border); background: var(--cream-bg); border-radius: var(--r-sm);
  padding: 7px 9px; font-family: var(--font-body); font-size: 12.5px;
}

/* ---------- Mood board (step 8) ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.photo-tile { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-remove {
  position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.55); color: #fff; border: none;
  border-radius: 50%; width: 20px; height: 20px; font-size: 13px; line-height: 1;
}
.mood-board-form { display: flex; gap: 6px; margin-top: 8px; }
.mood-board-form input[type="url"] {
  flex: 1; border: 1px solid var(--border); background: var(--cream-bg); border-radius: var(--r-sm);
  padding: 8px 10px; font-family: var(--font-body); font-size: 13px;
}
.mood-board-form input[type="file"] { flex: 1; font-size: 12px; }

/* ---------- Weather (step 9) ---------- */
.weather-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.weather-row:last-of-type { border-bottom: none; }
.weather-date { flex: 1; font-weight: 600; }
.weather-desc { color: var(--ink-soft); }
.weather-temps { font-variant-numeric: tabular-nums; }
.weather-rain { color: var(--cat-blue); font-size: 11.5px; }
.weather-row-climate .weather-date { font-style: italic; font-weight: 400; color: var(--ink-soft); }

/* ---------- Advisories + guidance (step 10) ---------- */
.advisory-summary { margin-bottom: 10px; }
.advisory-source { font-size: 12px; margin: 4px 0 0; }
.guidance-card { margin-bottom: 10px; }
.guidance-card h3 { font-size: 13px; margin: 0 0 3px; }
.guidance-sources { font-size: 11px; color: var(--ink-soft); }
.guidance-sources a { color: var(--ink-soft); }
.disclaimer { font-size: 11px; color: var(--ink-soft); font-style: italic; margin: 10px 0; }