/* ==========================================================================
   Apps 4 That — TripKit  (app-specific styles)
   Builds on a4t-ui.css tokens. Mobile-first. Accent = TripKit #2AB7CA.
   Only the bits the shared system doesn't already ship: tabs, add-row,
   check-list rows, trips grid, day cards.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TripKit expression dials (design-system v2 "personality dials")
   A breezy departure-lounge world: teal lead, sky support, sand warmth.
   Loaded after a4t-ui.css, so these :root values win over the defaults.
   -------------------------------------------------------------------------- */
:root {
  --accent-2: #6ED3E0;                /* sky — pairs with the TripKit teal   */
  --accent-support: #1F2A44;          /* navy anchor from the brand mark     */
  --bg-glow-1: #2AB7CA;               /* teal, top-left                      */
  --bg-glow-2: #6ED3E0;               /* sky, top-right                      */
  --bg-glow-3: #F4B942;               /* sand, low warmth                    */
  --shadow-rgb: 10, 42, 56;           /* slightly cool, teal-tinted shadows  */
}

/* View switching */
.view[hidden] { display: none; }
.panel[hidden] { display: none; }

/* ---- Trips grid (saved-trip cards) ---- */
.trips-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
.trip-card {
  background: var(--bg-elevated);
  border: 1px solid var(--surface-line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  width: 100%;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.trip-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-line));
}
.trip-card__name { font-size: var(--fs-h3); font-weight: var(--fw-bold); margin: 0; }
.trip-card__meta { font-size: var(--fs-caption); color: var(--text-muted); }
.trip-card__bar { margin-top: var(--space-2); }
.trip-card__icon { color: var(--accent-strong); }
.trip-card__icon svg { width: 2rem; height: 2rem; display: block; }

/* ---- First-run onboarding (empty trips hub) ---- */
.onboard {
  background: var(--surface-tint, var(--bg-elevated));
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.onboard__lede { font-weight: var(--fw-semibold); margin-bottom: var(--space-4); }
.onboard__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 40rem) {
  .onboard__steps { grid-template-columns: repeat(3, 1fr); }
}
.onboard__step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  align-items: center;
}
.onboard__step > strong { grid-column: 2; }
.onboard__step > span:last-child {
  grid-column: 2;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.onboard__num {
  grid-row: 1 / span 2;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- Your data (export / import) ---- */
.data-tools {
  border-top: 1px solid var(--surface-line);
  padding-top: var(--space-5);
}

/* ---- Tabs ---- */
.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--surface-line);
  margin: var(--space-6) 0 var(--space-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2.5px solid transparent;
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  padding: var(--space-3) var(--space-3);
  min-height: var(--tap-min);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

/* ---- Add-item row ---- */
.add-row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.add-row .input { flex: 1; }
.add-row .btn { flex: none; }

/* ---- Check lists (packing groups + essentials) ---- */
.pack-group__title {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-2);
}
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.check-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--surface-line);
  min-height: var(--tap-min);
}
.check-item:hover { border-color: var(--surface-line-strong); }
.check-item__box {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.check-item__label {
  flex: 1;
  cursor: pointer;
  line-height: var(--lh-snug);
  word-break: break-word;
}
.check-item--done .check-item__label {
  color: var(--text-faint);
  text-decoration: line-through;
}
.check-item__remove {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-faint);
  font-size: 1.25rem;
  line-height: 1;
  width: var(--tap-min);
  height: var(--tap-min);
  min-width: var(--tap-min);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex: none;
  transition: color var(--t-fast), background var(--t-fast);
}
.check-item__remove:hover { color: var(--c-danger); background: var(--bg-sunken); }

/* ---- Itinerary day cards ---- */
.day-card {
  background: var(--bg-elevated);
  border: 1px solid var(--surface-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.day-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.day-card__title { font-size: var(--fs-h3); margin: 0; }
.day-items {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.day-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--surface-line);
}
.day-item:last-child { border-bottom: 0; }
.day-item__time {
  flex: none;
  min-width: 4.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  color: var(--accent-strong);
  font-size: var(--fs-caption);
}
.day-item__time--empty { color: var(--text-faint); font-weight: var(--fw-regular); }
.day-item__text { flex: 1; word-break: break-word; }
.day-item__remove {
  appearance: none; background: transparent; border: 0;
  color: var(--text-faint); font-size: 1.1rem; line-height: 1;
  width: var(--tap-min); height: var(--tap-min); min-width: var(--tap-min);
  border-radius: var(--radius-sm); cursor: pointer; flex: none;
}
.day-item__remove:hover { color: var(--c-danger); background: var(--bg-sunken); }

.day-add {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.day-add__time {
  width: 7rem;
  flex: none;
}
.day-add__text { flex: 1; min-width: 8rem; }

.day-empty {
  color: var(--text-faint);
  font-size: var(--fs-caption);
  font-style: italic;
  margin: 0 0 var(--space-3);
}

/* Small "icon" delete button used in day head */
.btn-icon {
  appearance: none; background: transparent; border: 0;
  color: var(--text-faint); font-size: var(--fs-caption);
  min-height: var(--tap-min); padding: 0 var(--space-2);
  border-radius: var(--radius-sm); cursor: pointer;
  font-weight: var(--fw-medium);
}
.btn-icon:hover { color: var(--c-danger); background: var(--bg-sunken); }

/* Toast hidden state */
.a4t-toast[hidden] { display: none; }

/* Tiny utility */
.empty-hint { color: var(--text-faint); font-size: var(--fs-caption); font-style: italic; }