/* ============================================================
   Bluewater Forecast — responsive layer (tablet + phone)
   Desktop (>=1024px) is untouched; every rule here is gated to
   <=1023px. Phone (<=600px) uses a JS-driven slide-up data sheet
   over a full-screen map: mobile.js adds `.mobile-mode` to
   .app-container and moves the data blocks into `.mobile-sheet`.
   ============================================================ */

/* ============================================================
   TABLET  (601–1023px): single column, scrollable, 2-col charts
   ============================================================ */
@media (min-width: 601px) and (max-width: 1023px) {
  html, body { height: auto; min-height: 100%; overflow-y: auto; }
  .app-container { height: auto; min-height: 100vh; }

  .main-content {
    flex-direction: column;
    height: auto;
    overflow: visible;
    gap: 0.6rem;
  }
  .left-panel, .right-panel { width: 100%; min-width: 0; }
  /* base ships a high-specificity `.app-container:not(.fullscreen-mode) .right-panel{width:35%;overflow:hidden}`
     — match it so the stacked panels go full width and don't clip */
  .app-container:not(.fullscreen-mode) .left-panel,
  .app-container:not(.fullscreen-mode) .right-panel {
    width: 100%; overflow: visible; height: auto;
  }

  .map-container { height: 50vh; min-height: 320px; }
  #map { height: 100% !important; }

  .ocean-view-section { height: auto; }
  .ovs-track { height: auto; }
  #pane-realtime .buoycam-container { flex: 0 0 160px; }

  .current-conditions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }

  .charts-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 0.55rem;
    height: auto;
    flex: none;
  }
  .chart-panel { height: 210px; }
  .chart-panel canvas { height: 150px !important; }
}

/* ============================================================
   PHONE  (<=600px): map-first + slide-up sheet
   ============================================================ */
@media (max-width: 600px) {
  html, body { height: 100%; overflow: hidden; }

  /* --- compact translucent top bar over the map --- */
  .beta-banner { display: none; }               /* reclaim vertical space */
  .header {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1300;
    padding: 6px 10px;
    background: linear-gradient(180deg, rgba(10,14,18,0.92) 0%, rgba(10,14,18,0.55) 80%, transparent 100%);
    border: none;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
  }
  .header-content { flex: 0 1 auto; min-width: 0; }
  .wave-container { display: none; }
  /* the brand title crowds the map controls on a phone — drop it (the tab title
     + favicon already identify the app); the header keeps just the controls */
  .brand-name, .header-content { display: none !important; }
  .tagline { display: none; }

  .header-controls { flex: 0 0 auto; gap: 6px; align-items: center; }
  .ocean-link { display: none !important; }      /* "FULL MAP" is meaningless when the map IS full */
  .time-display { display: none !important; }    /* clock lives in the sheet on phone */
  .loc-btn { padding: 5px 8px; }
  .loc-btn-label { font-size: 12px; }
  /* location dropdown as a near-fullscreen sheet */
  .loc-panel { position: fixed !important; top: 46px; left: 8px; right: 8px; width: auto !important;
               max-height: 70vh; z-index: 1400; }

  /* --- map fills the viewport (mobile.js sets .mobile-mode) --- */
  .main-content { display: block; height: 100vh; padding: 0; overflow: visible; }
  .app-container.mobile-mode .left-panel { display: block; width: 100%; }
  .app-container.mobile-mode .map-container {
    position: fixed; inset: 0; height: 100vh; width: 100vw;
    z-index: 1; border-radius: 0;
  }
  .app-container.mobile-mode #map { height: 100vh !important; width: 100vw !important; border-radius: 0; }
  /* right-panel is emptied on phone (its blocks move into the sheet) — hide the shell */
  .app-container.mobile-mode:not(.fullscreen-mode) .right-panel { display: none !important; }

  /* LAYERS toggle: a thumb-reachable FAB at the bottom-left of the map (was a
     top strip that needed a reach to the top of the screen). Sits just above the
     collapsed data sheet; the data sheet covers it when raised (that's when you're
     reading data, not picking layers — drag the sheet down to get it back). */
  #mapLayerChips {
    position: fixed; left: 12px; bottom: 60px; top: auto; right: auto; z-index: 1150;
    display: flex; gap: 6px; padding: 0;
  }
  #mapLayerChips .layers-dd-btn {
    font-size: 12px; padding: 11px 15px; letter-spacing: 0.14em;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  }
  /* the panel opens UPWARD from the FAB and fills most of the width, easy to
     scan + dismiss with a thumb (tap the FAB again or tap the map) */
  .layers-dd {
    position: fixed !important; left: 10px !important; right: 10px !important;
    bottom: 108px !important; top: auto !important; width: auto !important;
    max-height: 62vh !important; z-index: 1350 !important;
    border-radius: 12px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important;
  }
  .layers-dd .layer-row { padding: 8px 2px; }   /* taller rows = bigger tap targets */
  .layers-dd .layer-check { width: 15px; height: 15px; flex: 0 0 15px; }

  /* --- the slide-up data sheet --- */
  .mobile-sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    height: 42vh;
    z-index: 1200;
    display: flex; flex-direction: column;
    background: var(--background-medium, #12181d);
    border-top: 1px solid var(--border-color, #1c2530);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.55);
    touch-action: none;
    transition: height 0.26s cubic-bezier(.22,.61,.36,1);
  }
  .mobile-sheet.dragging { transition: none; }

  .ms-handle {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    padding: 9px 0 7px;
    cursor: grab; touch-action: none;
  }
  .ms-grip { width: 40px; height: 4px; border-radius: 3px; background: var(--text-muted, #5c6b78); opacity: 0.7; }

  .ms-body {
    flex: 1 1 auto;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 10px 16px;
    touch-action: pan-y;
    display: flex; flex-direction: column; gap: 10px;
  }
  /* the relocated blocks carry desktop flex sizing (e.g. .current-conditions
     flex:0.1, .charts-container flex:0.4) that collapses them in the sheet's
     flex column and makes their content overflow onto the next block —
     force every direct child to size to its own content */
  .ms-body > * { flex: 0 0 auto !important; min-height: 0; }

  /* mini clock strip injected into the sheet header area */
  .ms-clock {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
    letter-spacing: 0.06em; padding: 0 2px 2px;
  }
  .ms-clock b { color: var(--accent-teal); font-weight: 600; }

  /* content blocks inside the sheet */
  .mobile-sheet .current-conditions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .mobile-sheet .condition-card { padding: 8px 4px; }
  .mobile-sheet .condition-value { font-size: 1rem; }

  .mobile-sheet .timeline-controls { width: 100%; margin: 0; }

  .mobile-sheet .ocean-view-section { height: auto; }
  .mobile-sheet .ovs-track { height: auto; }
  .mobile-sheet #pane-realtime .buoycam-container { flex: 0 0 150px; }
  /* buoy cards: swipeable carousel instead of 4 cramped columns */
  .mobile-sheet .buoy-cards {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .mobile-sheet .buoy-cards::-webkit-scrollbar { display: none; }
  .mobile-sheet .buoy-cards > * { flex: 0 0 80%; scroll-snap-align: start; }

  .mobile-sheet .charts-container {
    display: grid; grid-template-columns: 1fr; gap: 10px; height: auto; flex: none; padding: 0;
  }
  .mobile-sheet .chart-panel { height: 200px; }
  .mobile-sheet .chart-panel canvas { height: 145px !important; }

  /* keep the ambient backdrop cheap on phones */
  .app-bg { opacity: 0.5; }
}

/* very small phones: give the peek a touch more room via smaller cards */
@media (max-width: 380px) {
  .mobile-sheet .condition-value { font-size: 0.9rem; }
  .mobile-sheet .condition-label { font-size: 8px; }
}