/* =====================================================================
   WORTH BEING THERE — trip planner styles (shared by all team pages)

   Theme-agnostic: every color comes from the --tp-* variables below.
   Each team page maps its own palette onto these in a tiny override
   block (see the .trip-planner rule in bears/index.html or
   packers/index.html). Don't hardcode team colors in this file.
   ===================================================================== */
.trip-planner {
  /* fallbacks only — team pages override these */
  --tp-accent: #cda434;
  --tp-on-accent: #10131c;
  --tp-deep: #0d1730;
  --tp-card: #1d2b4f;
  --tp-bone: #f4efe6;
  --tp-bone-dim: #c8c2b4;
  --tp-line: rgba(244, 239, 230, 0.14);
  /* group colors for map pins + card chips (consistent across teams) */
  --tp-stay: #7ea8ff;
  --tp-eat: #ffb054;
  --tp-drink: #ff7a9c;
  --tp-do: #6fdc8c;
}

/* ---------- filter bar ---------- */
.tp-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
  background: var(--tp-card);
  border: 1px solid var(--tp-line);
  border-top: 5px solid var(--tp-accent);
  padding: 22px;
  margin-bottom: 30px;
}
.tp-filters > div { min-width: 0; }
.tp-filters label {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  color: var(--tp-bone-dim);
  margin-bottom: 7px;
}
.tp-filters select,
.tp-filters input[type="date"] {
  width: 100%;
  background: var(--tp-deep);
  border: 1px solid rgba(244, 239, 230, 0.3);
  color: var(--tp-bone);
  font-family: "Barlow", sans-serif;
  font-size: 0.98rem;
  padding: 11px 12px;
  border-radius: 4px;
  color-scheme: dark; /* native date-picker icons legible on dark bg */
  -webkit-appearance: none;
  appearance: none;
}
.tp-filters select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23f4efe6' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.tp-filters select:focus,
.tp-filters input:focus {
  outline: 2px solid var(--tp-accent);
  outline-offset: 1px;
}
.tp-go {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1rem;
  color: var(--tp-on-accent);
  background: var(--tp-accent);
  border: none;
  cursor: pointer;
  padding: 12px 26px;
  box-shadow: 4px 4px 0 rgba(244, 239, 230, 0.16);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.tp-go:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(244,239,230,0.2); }
.tp-go:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(244,239,230,0.16); }

/* ---------- recommendation groups ---------- */
.tp-group { margin-bottom: 34px; }
.tp-group-title {
  font-family: "Archivo Black", "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--tp-bone);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.tp-group-title .tp-dot {
  width: 12px; height: 12px; border-radius: 50%;
  flex: none;
}
.tp-group-sub {
  color: var(--tp-bone-dim);
  font-size: 0.92rem;
  margin-bottom: 14px;
}
.tp-group-sub a { color: var(--tp-accent); }
.tp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.tp-show-more {
  display: inline-block;
  margin-top: 14px;
  background: none;
  border: 1px solid var(--tp-line);
  color: var(--tp-accent);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
  padding: 9px 14px;
  min-height: 36px;
  cursor: pointer;
}
.tp-show-more:hover, .tp-show-more:focus-visible { border-color: var(--tp-accent); }

/* ---------- one place card ---------- */
.tp-card {
  position: relative;
  display: block;
  background: var(--tp-card);
  border: 1px solid var(--tp-line);
  padding: 14px 15px 13px;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.tp-card:hover { transform: translateY(-2px); }
.tp-card:focus-within { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
.tp-card input { position: absolute; opacity: 0; pointer-events: none; }
.tp-card.selected {
  border-color: var(--tp-accent);
  box-shadow: inset 0 0 0 1px var(--tp-accent);
}
.tp-card .tp-name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  color: var(--tp-bone);
  padding-right: 30px;
  line-height: 1.15;
}
.tp-card .tp-meta {
  color: var(--tp-bone-dim);
  font-size: 0.88rem;
  margin-top: 3px;
}
.tp-card .tp-why {
  color: var(--tp-bone-dim);
  font-size: 0.92rem;
  font-style: italic;
  margin-top: 6px;
}
.tp-card .tp-badges { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tp-chip.pick { background: var(--tp-accent); color: #0d1730; font-weight: 700; }
.tp-chip {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  padding: 2px 8px 1px;
  border-radius: 3px;
  border: 1px solid var(--tp-line);
  color: var(--tp-bone-dim);
}
.tp-chip.stadium { border-color: var(--tp-accent); color: var(--tp-accent); }
.tp-card .tp-check {
  position: absolute;
  top: 10px; right: 12px;
  width: 22px; height: 22px;
  border: 2px solid var(--tp-bone-dim);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 0.85rem;
  color: transparent;
}
.tp-card.selected .tp-check {
  background: var(--tp-accent);
  border-color: var(--tp-accent);
  color: var(--tp-on-accent);
}
.tp-card .tp-site {
  color: var(--tp-accent);
  font-size: 0.86rem;
  text-decoration: none;
  display: inline-block;
  margin-top: 7px;
}
.tp-none {
  color: var(--tp-bone-dim);
  font-style: italic;
  font-size: 0.95rem;
}

/* ---------- itinerary ("Your trip") ---------- */
.tp-trip {
  background: var(--tp-deep);
  border: 1px solid var(--tp-line);
  border-top: 5px solid var(--tp-accent);
  padding: 26px 24px;
  margin-top: 40px;
}
.tp-trip h3 {
  font-family: "Archivo Black", "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  font-size: 1.35rem;
  color: var(--tp-bone);
  margin-bottom: 2px;
}
.tp-trip .tp-trip-sub { color: var(--tp-bone-dim); font-size: 0.95rem; margin-bottom: 18px; }
.tp-party-note { color: var(--tp-bone); font-size: 0.95rem; margin-bottom: 16px; }
.tp-remove {
  background: none; border: none; cursor: pointer;
  color: var(--tp-bone-dim); font-size: 0.95rem; line-height: 1;
  min-width: 32px; min-height: 32px; padding: 4px 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tp-remove:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 1px; }
.tp-remove:hover { color: var(--tp-accent); }
.tp-trip-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tp-btn {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.92rem;
  padding: 10px 20px;
  border: 1px solid var(--tp-accent);
  background: none; color: var(--tp-accent);
  cursor: pointer; text-decoration: none; display: inline-block;
}
.tp-btn.primary { background: var(--tp-accent); color: var(--tp-on-accent); }
.tp-btn:hover { filter: brightness(1.1); }
.tp-disclosure { color: var(--tp-bone-dim); font-size: 0.82rem; margin-top: 14px; font-style: italic; }

/* ---------- map ---------- */
.tp-map {
  height: clamp(320px, 45vw, 480px);
  border: 1px solid var(--tp-line);
  border-top: 5px solid var(--tp-accent);
  margin-top: 26px;
  background: var(--tp-deep);
}
/* Tone down the stock OSM basemap so picks pop against it — only the
   tile layer is muted, markers/popups stay full color. */
.tp-map .leaflet-tile-pane {
  filter: grayscale(55%) brightness(0.92) saturate(0.6) contrast(0.95);
}
.tp-map .leaflet-interactive {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}
.tp-load-failed .tp-map, .tp-load-failed .tp-map-legend { display: none; }
.tp-plan-warn { color: var(--tp-accent); font-style: normal; font-weight: 600; }
.tp-map-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 10px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.82rem;
  color: var(--tp-bone-dim);
}
.tp-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tp-map-legend .tp-dot { width: 10px; height: 10px; border-radius: 50%; }
.leaflet-popup-content { font-family: "Barlow", sans-serif; font-size: 0.9rem; }
.leaflet-popup-content b { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1rem; }

/* ---------- neighborhoods (Where to stay, v2) ---------- */
.tp-hoods { display: grid; gap: 12px; }
.tp-hood-card { cursor: pointer; }
.tp-hood-card .tp-name { font-size: 1.18rem; }
.tp-hood-toggle {
  display: inline-block;
  margin-top: 10px;
  background: none;
  border: 1px solid var(--tp-line);
  color: var(--tp-accent);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  padding: 9px 14px;
  min-height: 36px;
  cursor: pointer;
}
.tp-hood-toggle:hover, .tp-hood-toggle:focus-visible { border-color: var(--tp-accent); }
.tp-hood-hotels {
  border: 1px solid var(--tp-line);
  border-top: none;
  background: var(--tp-deep);
  padding: 14px;
}
.tp-hood-hotels > .tp-site { margin-top: 12px; }

/* ---------- day-by-day plan (Your Trip, v2) ---------- */
.tp-base {
  color: var(--tp-bone);
  font-size: 0.98rem;
  margin-bottom: 16px;
}
.tp-base a { color: var(--tp-accent); }
.tp-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.tp-day {
  background: var(--tp-card);
  border: 1px solid var(--tp-line);
  border-top: 4px solid var(--tp-line);
  padding: 16px 15px;
}
.tp-day.game { border-top-color: var(--tp-accent); }
.tp-day.drag-over { outline: 2px dashed var(--tp-accent); outline-offset: -2px; }
.tp-day-head { margin-bottom: 10px; }
.tp-day-date {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.02rem;
  color: var(--tp-bone);
}
.tp-day-label {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--tp-accent);
}
.tp-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tp-day li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: 0.92rem; color: var(--tp-bone);
  border-bottom: 1px dashed var(--tp-line);
  padding-bottom: 6px;
}
.tp-day li .tp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; align-self: center; }
.tp-day-item-main {
  display: flex; align-items: baseline; gap: 8px;
  flex: 1 1 150px; min-width: 0;
}
.tp-day-item-actions {
  display: flex; align-items: center; gap: 6px;
  flex: none;
}
.tp-drag-item { cursor: grab; }
.tp-drag-item:active { cursor: grabbing; }
.tp-drag-item.dragging { opacity: 0.4; }
.tp-drag-handle { color: var(--tp-bone-dim); font-size: 0.9rem; line-height: 1; flex: none; }
.tp-move-select {
  flex: none;
  max-width: 118px;
  background: var(--tp-deep);
  border: 1px solid var(--tp-line);
  color: var(--tp-bone-dim);
  font-family: "Barlow", sans-serif;
  font-size: 0.85rem;
  padding: 6px 6px;
  min-height: 32px;
  border-radius: 3px;
  color-scheme: dark;
}
.tp-move-select:focus { outline: 2px solid var(--tp-accent); outline-offset: 1px; }
.tp-day-item { flex: 1; }
.tp-day-item small { color: var(--tp-bone-dim); }
.tp-day .tp-fixed { color: var(--tp-accent); border-bottom-style: solid; }
.tp-open-day { color: var(--tp-bone-dim); font-style: italic; border-bottom: none !important; }
.tp-flat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 480px; }
.tp-flat li { display: flex; align-items: baseline; gap: 8px; color: var(--tp-bone);
  border-bottom: 1px dashed var(--tp-line); padding-bottom: 6px; font-size: 0.95rem; }
.tp-plan-note { color: var(--tp-bone-dim); font-size: 0.88rem; font-style: italic; margin-top: 14px; }
.tp-join-nudge {
  margin-top: 16px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: var(--tp-bone);
}
.tp-join-nudge a { color: var(--tp-accent); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .tp-filters { grid-template-columns: 1fr 1fr; }
  .tp-go { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .tp-trip { padding: 20px 14px; }
  .tp-hood-hotels { padding: 10px; }
  .tp-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .tp-days { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
@media print {
  /* Print = just the itinerary: black on white, no controls. Everything
     else is display:none (not visibility) so the page height collapses
     and you don't get trailing blank sheets. */
  *:has(.tp-trip) > *:not(:has(.tp-trip)):not(.tp-trip) { display: none !important; }
  .tp-trip, .tp-trip * {
    color: #000 !important;
    background: none !important;
    border-color: #999 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .tp-trip { padding: 0; margin: 0; border: none; border-top: 3px solid #000; }
  .tp-trip .tp-trip-sub, .tp-party-note, .tp-day-item small, .tp-day-label { color: #333 !important; }
  .tp-day { border: 1px solid #999; break-inside: avoid; }
  .tp-days { display: block; }
  .tp-days .tp-day + .tp-day { margin-top: 12px; }
  .tp-drag-item { cursor: default; }
  .tp-trip-actions, .tp-remove, .tp-disclosure, .tp-move-select, .tp-drag-handle,
  .tp-plan-note, .tp-join-nudge, .tp-open-day { display: none !important; }
  .tp-base a, .tp-trip a { text-decoration: none; }
}