@media (max-width:980px) { .shell { grid-template-columns:1fr; } }

@media (max-width:980px) { .side { position:static; } }

@media (max-width:700px) { .top-cards { grid-template-columns:1fr; } }

@media (max-width:420px) { .next-mini-grid { grid-template-columns:1fr; } }

@media (max-width:980px) { .content-grid { grid-template-columns:1fr; } }

@media (max-width:560px) { .chart-wrap { height:270px; } }

@media (max-width:560px) { #map { height:280px; } }

@media (max-width:980px) {
    .shell {
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .main, .content-grid, .insight-grid, .top-cards {
      display:contents;
    }
    .chart-card { order:1; }
    .next-tide-card { order:2; }
    .wind-card { order:3; }
    .map-card { order:4; }
    .side {
      order:5;
      position:static;
      width:100%;
      max-width:100%;
      min-width:0;
      overflow:hidden;
      align-self:stretch;
    }
    .side .section-title,
    .side .field,
    .side .btn-row,
    .side .chip-row,
    .side .status {
      width:100%;
      max-width:100%;
      min-width:0;
    }
    .side input,
    .side select,
    .side button {
      max-width:100%;
      min-width:0;
    }
    .side .section-title {
      align-items:flex-start;
      flex-wrap:wrap;
    }
    .side .section-title .mini { overflow-wrap:anywhere; }
    .main > details { order:6; }
  }

@media (max-width:560px) {
    .app { padding-left:10px; padding-right:10px; }
    .side { padding:12px; border-radius:20px; }
    .side .btn-row { grid-template-columns:1fr; }
    .side .chip-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .side .chip { width:100%; padding-left:8px; padding-right:8px; }
    .side input,
    .side select,
    .side button { font-size:16px; }
  }

@media (max-width:560px) {
    .hero-info .toolbar-left { display:grid; grid-template-columns:1fr 1fr; width:100%; }
    .hero-info .pill:first-child { grid-column:1 / -1; }
    .hero-info .pill { justify-content:center; min-width:0; }
  }

@media (max-width:560px) {
    .product-footer { padding:18px 8px 22px; }
    .footer-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .footer-stat { min-width:0; padding:10px 8px; }
    .footer-stat:last-child { grid-column:1 / -1; }
  }

@media (max-width:900px){ .insight-grid{grid-template-columns:1fr;} }

@media(max-width:560px){.info-strip{grid-template-columns:1fr 1fr}.offline-banner{margin-left:10px;margin-right:10px}}

@media(max-width:980px){.main{display:block!important}}

@media(max-width:900px){.dashboard-grid{grid-template-columns:1fr}.sea-grid{grid-template-columns:repeat(2,1fr)}.chart-wrap{height:330px}.hero-info .toolbar-left{grid-template-columns:1fr 1fr}.hero-info .pill:first-child{grid-column:1/-1}}

@media(max-width:560px){.app{padding:8px 10px 26px}.app-header{top:4px;padding:9px}.brand-icon{width:38px;height:38px}.brand-sub{display:none}.header-actions .text-label{display:none}.header-actions button{padding:9px 10px}.hero-info .toolbar-left{grid-template-columns:1fr 1fr}.hero-info .pill{padding:9px 10px;font-size:12px}.chart-card{order:auto;padding:12px 10px}.chart-wrap{height:300px;min-width:0;overflow:hidden}.chart-wrap canvas{max-width:100%;touch-action:pan-y}.chart-card .section-title:after{display:none}.chart-card .legend{gap:8px;font-size:11px}.chart-card .footer-note{font-size:11px}.dashboard-grid{display:flex;flex-direction:column}.next-tide-card{order:1}.wind-card{order:2}.sea-grid{grid-template-columns:repeat(2,1fr)}.astro-grid{grid-template-columns:repeat(2,1fr)}.map-card #map{height:320px}.quick-bar{bottom:7px}.quick-bar button{font-size:10px}.product-footer{padding-bottom:86px}}

@media(max-width:560px){
  .location-picker{
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 24px);
    padding:14px 12px;
    border-radius:20px;
  }
  .location-picker-list{max-height:58dvh}
  .location-option{min-height:46px}
  .date-navigator{width:100%;max-width:100%;margin-left:0;margin-right:0;padding:8px;border-radius:16px;overflow:hidden}
  .date-stepper{grid-template-columns:40px minmax(0,1fr) 40px;gap:6px;width:100%;max-width:100%;min-width:0}
  .date-step-button{padding:9px 6px;font-size:23px}
  .date-step-button span{display:none}
  .date-calendar-control{min-width:0;max-width:100%;padding:5px 6px;overflow:hidden}
  .date-calendar-control input{display:block;width:100%;min-width:0;max-width:100%;font-size:14px}
  .date-quick-list{
    display:flex;
    gap:6px;
    width:100%;
    max-width:100%;
    min-width:0;
    margin-left:0;
    margin-right:0;
    padding:0 0 2px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
  }
  .date-chip{flex:0 0 68px;min-width:68px;scroll-snap-align:start}
}