/* ---------------------------------------------------------------------------
   phoebe-mobile.css  —  phone and tablet overrides, shared by every page.

   Loaded last, so these win over each page's own rules at equal specificity.
   Heights are NOT set here: phoebe-embed.js pins them with !important when the
   page is framed, and it uses the same two breakpoints as this file.

     phone   <= 640px
     tablet   641 - 1024px

   The desktop layout is the one that matters; this file is allowed to drop
   things rather than shrink them. What it drops, and why, is noted at each
   point.
   --------------------------------------------------------------------------- */

/* ══════════════════════════════════════
   HEADER  (every page)
══════════════════════════════════════ */
@media (max-width:1024px){
  header{padding:0 1.25rem}
  .logo-svg{height:34px}
  nav a{padding:0 .7rem;font-size:10px;letter-spacing:.9px}
  .nav-cta,.nav-signout-btn{padding:6px 12px;font-size:10px;margin-left:8px}
  .theme-toggle{width:30px;height:30px;margin-left:8px}
}

@media (max-width:640px){
  header{padding:0 .8rem;height:56px}
  .logo-svg{height:25px}
  /* The two text links go. The logo already returns to the forecast index, and
     About is a page you visit once -- neither is worth the width next to the
     two buttons that people actually came to press. */
  nav a{display:none}
  .nav-cta,.nav-signout-btn{padding:6px 9px;font-size:9.5px;letter-spacing:.3px;margin-left:6px}
  .theme-toggle{width:28px;height:28px;margin-left:6px}
}

/* ══════════════════════════════════════
   GLOBE  (index, submit)
══════════════════════════════════════ */

/* Callouts are a pointer feature: they open on hover, sit in the space around
   the globe, and can be dragged. None of that survives a touch screen or fits
   beside a globe this size, so they go for tablets as well as phones. The page
   already hid the card below 860px; this takes the toggle and the machinery
   with it (phoebe-embed.js switches the cycle itself off). */
@media (max-width:1024px){
  .gc-card{display:none !important}
  #gcToggle{display:none !important}
}

@media (max-width:640px){
  /* Controls float over the globe. At 300px fixed they cover most of a phone,
     so let them span the width with a proper margin instead. */
  .globe-controls{top:10px;left:10px;right:10px;width:auto;max-width:none;gap:6px}
  .map-controls{top:10px;right:10px;gap:5px}
  /* 38px is under the 44px touch target everyone recommends; the icons have
     room to grow because the row is short. */
  .mc-btn{width:40px;height:40px}
  .globe-search{height:40px}
  .gc-filter-btn{width:40px;height:40px}
  /* The hint text overlaps the controls once they are full width. */
  .globe-hint,.sub-globe-hint{display:none !important}
}

/* ══════════════════════════════════════
   SUBMIT  —  list + globe, side by side
══════════════════════════════════════ */

/* Tablet keeps both columns; the list just stops taking a third of them. */
@media (max-width:1024px){
  .sub-list-col{width:290px}
}

@media (max-width:640px){
  /* A globe in the ~40px left over beside the list is worse than no globe. The
     list is what the page is for, so it takes the whole width and the map goes.
     Everything the map does -- filter by country -- is in the region filters
     under the search box. */
  .sub-globe-col{display:none !important}
  .sub-list-col{width:100% !important;border-right:none}

  .sub-list-hdr{padding:10px 12px}
  .sub-list-hdr-title{font-size:15px}
  .sub-list-search{padding:8px 10px}
  .sub-list-scroll{padding:8px}
  /* Chips wrap to three or four rows on a phone and push the list off screen.
     Scroll them sideways in one row instead. */
  .search-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
                scrollbar-width:none;padding-bottom:2px}
  .search-chips::-webkit-scrollbar{display:none}
  .search-chips .fp-chip{flex-shrink:0}
}

/* ══════════════════════════════════════
   WIZARD + MODALS
══════════════════════════════════════ */
@media (max-width:640px){
  /* Nearly full bleed. phoebe-embed.js caps the height to the frame; this is
     the width and the padding it needs to go with it. */
  .wiz-backdrop{padding:8px}
  .wiz-modal,.wiz-modal.wiz-modal-wide{max-width:100%}
  .wiz-body{padding:14px 14px 6px}
  .wiz-footer{padding:10px 14px 12px}
  .dm-card{padding:20px 18px}
  .help-overlay .wiz-modal{max-width:100%}
}

/* ══════════════════════════════════════
   READING PAGES  (forecast, about)
══════════════════════════════════════ */
@media (max-width:640px){
  .main,.main-light{padding-left:1rem;padding-right:1rem}
  /* Wide data tables are the one thing that cannot be reflowed sensibly, so
     give them their own horizontal scroll rather than letting them stretch the
     page and shrink everything else. */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ══════════════════════════════════════
   TOUCH
══════════════════════════════════════ */
@media (hover:none){
  /* Hover styles latch on touch -- the last thing tapped keeps its hover state
     until something else is tapped, which reads as a stuck selection. */
  .sub-fc-row:hover{box-shadow:none;transform:none}
  .mc-btn:hover{background:var(--globe-control-bg)}
}