/* ===== Mobile + tablet overrides (≤900px) ===== */
@media (max-width: 900px) {
  body { font-size: 15px; }

  /* Shell becomes single column, sidebar becomes a top nav */
  .app { grid-template-columns: 1fr; }

  .sidebar {
    position: sticky;
    top: 0;
    height: auto;
    padding: 12px 14px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    border-right: 0;
    border-bottom: 2px solid var(--ink);
    z-index: 800;
  }
  .logo { font-size: 16px; flex-shrink: 0; }
  .logo br { display: none; }
  .logo-tag { display: none; }

  /* Nav becomes a horizontally-scrolling pill rail */
  .nav {
    flex-direction: row;
    gap: 6px;
    margin: 0;
    overflow-x: auto;
    flex: 1;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
  }
  .nav-item .num { display: none; }
  .nav-item .badge { padding: 1px 5px; font-size: 9px; }

  .crew { display: none; }

  /* Banner */
  .banner {
    padding: 14px 16px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .banner-title { font-size: 26px; }
  .banner-sub { font-size: 10px; }
  .banner-meta { margin-left: 0; gap: 14px; flex-basis: 100%; justify-content: flex-start; }
  .banner-stat .n { font-size: 20px; }

  .marquee-strip { font-size: 10px; padding: 5px 0; }

  .page { padding: 18px 16px 40px; }
  .section-head h2 { font-size: 18px; }
  .section-head .side { font-size: 10px; }

  /* Sync badge — move to not overlap nav */
  .app > div[style*="position:fixed"],
  .app > div[style*="position: fixed"] { top: auto !important; bottom: 10px; right: 10px; }

  /* ===== Dashboard — stack cards ===== */
  .dash-grid { grid-template-columns: 1fr; gap: 12px; }
  .card-countdown, .card-today, .card-weather, .card-clashes, .card-map,
  .card-budget-mini, .card-crew-status, .card-next { grid-column: span 1; }

  .countdown { min-height: 200px; padding: 18px; }
  .countdown .big { font-size: 88px; gap: 6px; }
  .countdown .barcelona { font-size: 18px; }
  .today, .weather, .clashes, .map, .crew-status-card, .mini-budget, .next-up { min-height: auto; }
  .mini-budget .total, .budget-card .n { font-size: 36px; }
  .next-up .art { font-size: 32px; }

  /* ===== Lineup ===== */
  .lineup-filters { gap: 8px; }
  .lineup-filters .group button { padding: 7px 10px; font-size: 10px; }
  .lineup-filters .my-count { font-size: 10px; width: 100%; order: 10; }
  .lineup-main { grid-template-columns: 1fr; }
  .myschedule {
    position: static;
    max-height: none;
  }
  .act-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
  .act { min-height: 84px; padding: 8px 10px; }
  .act .name { font-size: 15px; }
  .act.headliner .name { font-size: 17px; }

  /* ===== Travel ===== */
  .travel-grid { grid-template-columns: 1fr; }
  .flight-body { grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 12px; }
  .flight-end .code { font-size: 26px; }
  .flight-arrow .line { width: 40px; }
  .timeline { padding: 14px; }
  .timeline-track { flex-direction: column; gap: 10px; }
  .timeline-step { padding: 0; flex-direction: row; gap: 12px; align-items: center; }
  .timeline-step::before {
    top: 30px; left: 14px; right: auto;
    width: 2px; height: calc(100% - 30px);
  }
  .timeline-step .dot { margin: 0; }

  /* ===== Accommodation ===== */
  .stay { grid-template-columns: 1fr; }
  .stay-photo { min-height: 260px; }
  .stay-photo .title { font-size: 28px; }
  .stay-dl { grid-template-columns: 1fr; gap: 10px; }
  .rooms { grid-template-columns: 1fr; }

  /* ===== Activities ===== */
  .day-head { padding: 12px 14px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .day-head .d-name { font-size: 20px; }
  .day-body { padding: 12px; }
  .activity {
    grid-template-columns: 60px 1fr;
    gap: 10px;
    padding: 10px;
  }
  .activity .row { grid-column: 1 / -1; justify-content: space-between; }

  /* ===== Budget ===== */
  .budget-top { grid-template-columns: 1fr; gap: 10px; }
  .budget-card { min-height: auto; padding: 14px; }
  .ledger-head, .ledger-row {
    grid-template-columns: 70px 1fr 90px;
    gap: 8px;
    font-size: 12px;
  }
  .ledger-head span:nth-child(3),
  .ledger-head span:nth-child(4),
  .ledger-row > div:nth-child(3),
  .ledger-row > div:nth-child(4) { display: none; }
  .settle { grid-template-columns: 1fr; }

  /* ===== Packing / Food ===== */
  .packing-grid, .food-grid { grid-template-columns: 1fr; }

  /* ===== Chat ===== */
  .chat { grid-template-columns: 1fr; height: auto; }
  .chat-main { height: calc(100vh - 260px); }
  .chat-side { display: none; }
  .msg { max-width: 92%; }

  /* Stay within last 4 nav tabs we had, including chat 3 badge */

  /* ===== Tweaks panel — full width bottom sheet ===== */
  .tweaks {
    right: 10px; left: 10px; bottom: 10px;
    width: auto;
  }

  /* Hide hover-only transforms that look weird on touch */
  .act:hover, .restaurant:hover { transform: none; box-shadow: none; }
}

/* ===== Extra-small phones (≤480px) ===== */
@media (max-width: 480px) {
  .banner-title { font-size: 22px; }
  .countdown .big { font-size: 64px; }
  .countdown .barcelona { font-size: 14px; }
  .act-grid { grid-template-columns: 1fr 1fr; }
  .act .name { font-size: 13px; }
  .act.headliner .name { font-size: 14px; }
  .flight-end .code { font-size: 20px; }
  .flight-end .city, .flight-end .date { font-size: 8px; }
  .nav-item { padding: 7px 10px; font-size: 11px; }
}