/* =========================================================
   HealingMart Weather v8.0.4
   FINAL RESPONSIVE LAYOUT
   Layout only — runtime/API/map/data/event logic is untouched.
   ========================================================= */

:root{
  --hm-bg:#f3f6f8;
  --hm-panel:#ffffff;
  --hm-panel-soft:#f8fafb;
  --hm-line:#dce5ea;
  --hm-line-soft:#e9eef1;
  --hm-ink:#14384f;
  --hm-muted:#657b89;
  --hm-primary:#124e5a;
  --hm-radius-sm:12px;
  --hm-radius-md:16px;
  --hm-radius-lg:20px;
  --hm-shadow:0 5px 18px rgba(22,55,77,.055);
  --hm-gap:12px;
}

/* ---------- universal layout hygiene ---------- */
.screen,
.screen>*,
.rail,
.rail-inner,
.maparea,
.detail-weather,
#mobileLocalDashboard{
  min-width:0;
}
.rail-inner,
.detail-weather,
.local-right-inner{
  scrollbar-gutter:stable;
}
.nav{
  background:#fff!important;
  border-bottom:1px solid var(--hm-line)!important;
  box-shadow:0 2px 8px rgba(22,55,77,.025)!important;
}
.nav button .eyebrow,
.nav button small{
  display:none!important;
}
.nav button,
.nav button.active{
  box-shadow:none!important;
}
.nav button strong{
  margin:0!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
  color:inherit!important;
}

/* =========================================================
   MOBILE / TABLET
   ========================================================= */
@media(max-width:980px){
  :root{
    --studio-header:106px;
    --studio-nav:54px;
  }

  html,body,.app{
    background:var(--hm-bg)!important;
  }

  /* Header: compact two-row structure. */
  .top{
    min-height:106px!important;
    height:106px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:40px 46px!important;
    gap:7px 10px!important;
    padding:7px 12px 6px!important;
    background:#fff!important;
    border-bottom:1px solid var(--hm-line-soft)!important;
    box-shadow:none!important;
  }
  .brand{
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
    font-size:17px!important;
  }
  .brand small{
    font-size:8px!important;
    letter-spacing:.18em!important;
  }
  .actions{
    grid-column:2!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
  }
  .actions .status{display:none!important}
  .actions .ghost{
    height:40px!important;
    min-height:40px!important;
    padding:0 9px!important;
    border-radius:11px!important;
  }
  #locBtn{
    min-width:62px!important;
  }
  #refreshBtn{
    width:40px!important;
    min-width:40px!important;
    padding:0!important;
  }
  .search-shell{
    grid-column:1/-1!important;
    grid-row:2!important;
    max-width:none!important;
  }
  .search{
    height:46px!important;
    border:1px solid #d8e4ea!important;
    border-radius:13px!important;
    background:#f9fbfc!important;
    box-shadow:none!important;
  }
  .search input{
    font-size:14px!important;
  }
  .search button{
    height:36px!important;
    margin-right:5px!important;
    padding:0 13px!important;
    border-radius:9px!important;
  }

  /* Navigation: text only, readable, horizontal scroll instead of crushed labels. */
  .nav{
    display:flex!important;
    align-items:center!important;
    height:54px!important;
    padding:6px 8px!important;
    gap:5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    scrollbar-width:none!important;
  }
  .nav::-webkit-scrollbar{display:none!important}
  .nav button,
  .nav button.active{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:72px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0 13px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid transparent!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#36576b!important;
    scroll-snap-align:start!important;
  }
  .nav button strong{
    display:block!important;
    width:auto!important;
    font-size:12px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .nav button.active{
    border-color:#124e5a!important;
    background:#124e5a!important;
    color:#fff!important;
  }
  .nav button::before,
  .nav button::after{
    content:none!important;
    display:none!important;
  }

  /* Shared mobile screen geometry. */
  .screen.active,
  #screen-local.active,
  #screen-korea.active,
  #screen-world.active,
  #screen-moon.active,
  #screen-detail.active,
  #screen-compare.active{
    height:calc(100dvh - var(--studio-header) - var(--studio-nav))!important;
    min-height:0!important;
    max-height:calc(100dvh - var(--studio-header) - var(--studio-nav))!important;
    background:var(--hm-bg)!important;
  }

  /* ---------- LOCAL mobile dashboard ---------- */
  body.hm-v8-local-mobile #screen-local.active{
    display:block!important;
    overflow:hidden!important;
  }
  body.hm-v8-local-mobile #screen-local.active>.maparea{
    display:none!important;
  }
  body.hm-v8-local-mobile #screen-local.active>.local-right-rail{
    display:none!important;
  }
  body.hm-v8-local-mobile #screen-local.active>.rail{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    border:0!important;
    border-radius:0!important;
    background:var(--hm-bg)!important;
    box-shadow:none!important;
    transform:none!important;
    overflow:hidden!important;
  }
  body.hm-v8-local-mobile #screen-local.active>.rail>.mobile-handle,
  body.hm-v8-local-mobile #screen-local.active>.rail>.local-mobile-peek{
    display:none!important;
  }
  body.hm-v8-local-mobile #screen-local.active>.rail>.rail-inner{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    padding:10px 12px calc(28px + env(safe-area-inset-bottom))!important;
    background:var(--hm-bg)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #mobileLocalDashboard{
    width:100%!important;
    max-width:720px!important;
    margin:0 auto!important;
  }

  /* location row */
  #mobileLocalDashboard .v8-local-head{
    min-height:48px!important;
    margin:0 0 9px!important;
    padding:0 94px 3px 2px!important;
    border:0!important;
    border-bottom:1px solid var(--hm-line-soft)!important;
    position:relative!important;
  }
  #mobileLocalDashboard .v8-local-head .eyebrow-text{
    display:none!important;
  }
  #mobileLocalDashboard .v8-local-head #locName{
    margin:0!important;
    font-size:19px!important;
    line-height:1.35!important;
    text-align:left!important;
    color:var(--hm-ink)!important;
  }
  #mobileLocalDashboard .v8-head-actions{
    position:absolute!important;
    right:0!important;
    top:0!important;
    display:flex!important;
    gap:6px!important;
  }
  #mobileLocalDashboard .v8-head-actions button{
    position:static!important;
    transform:none!important;
    height:40px!important;
    min-height:40px!important;
    margin:0!important;
    border:1px solid #d9e4ea!important;
    border-radius:11px!important;
    background:#fff!important;
    color:#295d7d!important;
    box-shadow:none!important;
  }
  #v8MapToggle{
    width:58px!important;
    padding:0 7px!important;
    font-size:11px!important;
  }
  #mldFavorite{
    width:40px!important;
    padding:0!important;
  }

  /* current weather hero */
  #mobileLocalDashboard .v8-weather-hero{
    margin:0 0 var(--hm-gap)!important;
    padding:15px 13px 12px!important;
    border:1px solid #d2e2ec!important;
    border-radius:var(--hm-radius-lg)!important;
    background:linear-gradient(145deg,#d9efff 0%,#f1f9ff 58%,#fff 100%)!important;
    box-shadow:var(--hm-shadow)!important;
    overflow:hidden!important;
  }
  #mobileLocalDashboard .v8-weather-hero .point-current{
    min-height:100px!important;
    margin:0 0 11px!important;
    display:grid!important;
    grid-template-columns:86px auto minmax(88px,1fr)!important;
    align-items:center!important;
    gap:8px!important;
  }
  #mobileLocalDashboard .v8-weather-hero .point-weather-icon,
  #mobileLocalDashboard .v8-weather-art{
    width:86px!important;
    height:86px!important;
  }
  #mobileLocalDashboard #mldTempSlot #temp{
    font-size:56px!important;
    line-height:.95!important;
  }
  #mobileLocalDashboard .v8-current-copy{
    min-width:0!important;
  }
  #mobileLocalDashboard #mldConditionSlot #heroCondition{
    font-size:14px!important;
    white-space:normal!important;
  }
  #mobileLocalDashboard #mldFeelSlot{
    margin-top:4px!important;
  }
  #mobileLocalDashboard #mldFeelSlot #feels,
  #mobileLocalDashboard #mldFeelSlot #ydayDiff{
    font-size:10.5px!important;
  }
  #mobileLocalDashboard .v8-weather-hero .point-metrics{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:0!important;
    margin:0!important;
    border:1px solid #dce7ed!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.86)!important;
    overflow:hidden!important;
  }
  #mobileLocalDashboard .v8-weather-hero .point-metrics>div{
    min-height:68px!important;
    padding:8px 3px!important;
    border:0!important;
    border-right:1px solid #e4ebef!important;
    background:transparent!important;
    text-align:center!important;
  }
  #mobileLocalDashboard .v8-weather-hero .point-metrics>div:last-child{
    border-right:0!important;
  }
  #mobileLocalDashboard .v8-weather-hero .point-metrics span{
    font-size:9.5px!important;
  }
  #mobileLocalDashboard .v8-weather-hero .point-metrics b{
    margin-top:5px!important;
    font-size:13px!important;
  }
  #mobileLocalDashboard .mld-mood{
    margin:9px 0 0!important;
    padding:8px 10px!important;
    border:1px solid #dce9e4!important;
    border-radius:10px!important;
    background:#f3f8f6!important;
    font-size:10.5px!important;
    line-height:1.4!important;
    text-align:left!important;
  }
  #mobileLocalDashboard .mld-alert-slot{
    min-height:0!important;
    margin:6px 0 0!important;
    padding:0!important;
  }
  #mobileLocalDashboard .mld-alert-slot:not(.has-alert){
    display:none!important;
  }
  #mobileLocalDashboard .mld-alert-slot.has-alert{
    display:block!important;
    padding:7px 9px!important;
    border:1px solid #efc89f!important;
    border-radius:10px!important;
    background:#fff6ec!important;
    color:#8c3b1b!important;
    font-size:10.5px!important;
  }
  #mobileLocalDashboard .mld-weather-source{
    display:block!important;
    margin-top:7px!important;
    padding-top:7px!important;
    border-top:1px solid #e5edf1!important;
    font-size:9.5px!important;
    line-height:1.35!important;
    text-align:left!important;
  }

  /* shared local cards */
  #mobileLocalDashboard .nowcast,
  #mobileLocalDashboard .mld-point-card,
  #mobileLocalDashboard .mld-secondary,
  #mobileLocalDashboard .v8-live-preview,
  #mobileLocalDashboard .v8-favorites,
  #mobileLocalDashboard .v8-local-rank{
    width:100%!important;
    margin:0 0 var(--hm-gap)!important;
    border:1px solid var(--hm-line)!important;
    border-radius:var(--hm-radius-md)!important;
    background:#fff!important;
    box-shadow:var(--hm-shadow)!important;
  }

  /* hourly forecast */
  #mobileLocalDashboard .nowcast{
    padding:0!important;
    overflow:hidden!important;
  }
  #mobileLocalDashboard .nowcast-head{
    min-height:54px!important;
    padding:12px 13px 8px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    gap:1px 8px!important;
    text-align:left!important;
  }
  #mobileLocalDashboard .nowcast-head strong{
    grid-column:1!important;
    font-size:16px!important;
    color:var(--hm-ink)!important;
  }
  #mobileLocalDashboard .nowcast-head span{
    grid-column:1!important;
    font-size:10px!important;
    color:var(--hm-muted)!important;
  }
  #mobileLocalDashboard .v8-hour-more{
    grid-column:2!important;
    grid-row:1/3!important;
    min-height:36px!important;
    margin:0!important;
    padding:0 2px 0 10px!important;
    border:0!important;
    background:transparent!important;
    color:#2b78ad!important;
    box-shadow:none!important;
    font-size:11px!important;
  }
  #mobileLocalDashboard .nowcast-strip{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:thin!important;
  }
  #mobileLocalDashboard .nowcast-strip>.hm-hscroll{
    width:max-content!important;
    min-width:100%!important;
    margin:0!important;
    padding:0 10px 10px!important;
  }

  /* air quality */
  #mobileLocalDashboard .v8-air-mount .mld-point-card{
    padding:13px 11px!important;
  }
  #mobileLocalDashboard .v8-air-mount .mld-point-card>h3{
    margin:0 0 10px!important;
    font-size:16px!important;
    text-align:left!important;
  }
  #mobileLocalDashboard .air-rings{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  #mobileLocalDashboard .aq-ring{
    min-height:102px!important;
    border-radius:14px!important;
  }
  #mobileLocalDashboard .aq-ring svg{
    width:72px!important;
    height:72px!important;
  }
  #mobileLocalDashboard .aq-ring>div b{
    font-size:18px!important;
  }
  #mobileLocalDashboard .aq-ring>div span{
    font-size:12px!important;
  }

  /* astronomy + tide: pair on normal phones, stack on narrow phones */
  #mobileLocalDashboard .v8-astro-tide-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    margin:0 0 var(--hm-gap)!important;
    align-items:stretch!important;
  }
  #mobileLocalDashboard .v8-astro-tide-grid.is-single,
  #mobileLocalDashboard .v8-astro-tide-grid:has(#mldTideMount:empty){
    grid-template-columns:1fr!important;
  }
  #mobileLocalDashboard #mldTideMount:empty{
    display:none!important;
  }
  #mobileLocalDashboard .v8-tide-card[hidden]{
    display:none!important;
  }
  #mobileLocalDashboard .v8-astro-tide-grid .mld-point-card{
    height:194px!important;
    min-height:194px!important;
    max-height:194px!important;
    margin:0!important;
    padding:12px 10px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  #mobileLocalDashboard .mld-astro-card-section>h3,
  #mobileLocalDashboard .v8-tide-card>h3{
    min-height:32px!important;
    margin:0 0 7px!important;
    display:flex!important;
    align-items:center!important;
    font-size:12px!important;
    line-height:1.25!important;
    text-align:left!important;
  }
  #mobileLocalDashboard .mld-astro-card-section>h3::after{
    font-size:12px!important;
  }
  #mobileLocalDashboard .mld-astro-card-section .sun-row{
    flex:1 1 auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
  }
  #mobileLocalDashboard .mld-astro-card-section .pillbox{
    min-height:0!important;
    height:100%!important;
    padding:5px 3px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    text-align:center!important;
  }
  #mobileLocalDashboard .mld-astro-card-section .pillbox span{
    font-size:9px!important;
  }
  #mobileLocalDashboard .mld-astro-card-section .pillbox b{
    font-size:13px!important;
  }
  #mobileLocalDashboard .v8-tide-card #localOcean{
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  #mobileLocalDashboard .v8-tide-card .tide-events{
    flex:1 1 auto!important;
    min-height:0!important;
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    grid-auto-columns:minmax(68px,1fr)!important;
    gap:5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
  }
  #mobileLocalDashboard .v8-tide-card .tide-events::-webkit-scrollbar{display:none!important}
  #mobileLocalDashboard .v8-tide-card .tide-events>div{
    min-width:68px!important;
    height:100%!important;
    min-height:0!important;
    padding:5px 3px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid #e2eaf0!important;
    border-radius:9px!important;
    background:#f8fbfd!important;
    text-align:center!important;
  }
  #mobileLocalDashboard .v8-tide-card .tide-events span{font-size:8.5px!important}
  #mobileLocalDashboard .v8-tide-card .tide-events b{font-size:12px!important}
  #mobileLocalDashboard .v8-tide-card .tide-events small{font-size:8px!important}
  #mobileLocalDashboard .v8-tide-card .data-stamp{
    margin:4px 0 0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:8px!important;
  }

  /* shortcuts / favorites / secondary content */
  #mobileLocalDashboard .v8-quick-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin:0 0 var(--hm-gap)!important;
  }
  #mobileLocalDashboard .v8-quick-actions button{
    min-height:50px!important;
    padding:0 11px!important;
    border-radius:13px!important;
  }
  #mobileLocalDashboard .v8-favorites{
    padding:10px!important;
  }
  #mobileLocalDashboard .favorite-chips{
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
  }
  #mobileLocalDashboard .v8-live-preview{
    overflow:hidden!important;
  }
  #mobileLocalDashboard .v8-live-preview>h3{
    margin:0!important;
    padding:11px 12px 8px!important;
    font-size:14px!important;
    text-align:left!important;
  }
  #mobileLocalDashboard .v8-live-preview .windy-mini iframe{
    height:150px!important;
  }
  #mobileLocalDashboard .mld-provider-compare,
  #mobileLocalDashboard #mldAlertsMount>.section,
  #mobileLocalDashboard #mldCaptureMount>.section,
  #mobileLocalDashboard #mldRankMount>.section{
    padding:12px!important;
  }

  /* ---------- LOCAL map state ---------- */
  #screen-local.active.rail-collapsed{
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  #screen-local.active.rail-collapsed>.maparea{
    order:1!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:minmax(0,1fr) 54px!important;
  }
  #screen-local.active.rail-collapsed>.rail{
    order:2!important;
    position:relative!important;
    inset:auto!important;
    flex:0 0 106px!important;
    width:100%!important;
    height:106px!important;
    max-height:106px!important;
    transform:none!important;
    border:0!important;
    border-top:1px solid var(--hm-line)!important;
    border-radius:16px 16px 0 0!important;
    background:#fff!important;
    box-shadow:0 -7px 18px rgba(22,55,77,.07)!important;
  }
  #screen-local.active.rail-collapsed>.rail>.mobile-handle{
    height:24px!important;
  }
  #screen-local.active.rail-collapsed>.rail>.rail-inner{
    display:none!important;
  }
  #screen-local.active.rail-collapsed>.rail>.local-mobile-peek{
    display:block!important;
    height:82px!important;
    padding:2px 13px 8px!important;
    background:#fff!important;
  }
  #screen-local .map-timebar{
    position:relative!important;
    inset:auto!important;
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:6px 8px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:4px!important;
    border:0!important;
    border-top:1px solid var(--hm-line)!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    transform:none!important;
  }
  #screen-local .map-timebar>span{display:none!important}
  #screen-local .map-timebar button{
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    margin:0!important;
    padding:0 2px!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }
  #screen-local .map-title{
    top:10px!important;
    left:10px!important;
    right:auto!important;
    max-width:calc(100% - 20px)!important;
    padding:8px 10px!important;
    border-radius:11px!important;
    box-shadow:0 4px 14px rgba(22,55,77,.08)!important;
  }
  #screen-local .map-title span,
  #screen-local .map-title small{
    display:none!important;
  }
  #screen-local .map-title strong{
    margin:0!important;
    font-size:14px!important;
  }

  /* ---------- KOREA / WORLD LIVE ---------- */
  #screen-korea.active,
  #screen-world.active,
  #screen-moon.active{
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  #screen-korea.active>.maparea,
  #screen-world.active>.maparea{
    order:1!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }
  #screen-korea.active>.rail,
  #screen-world.active>.rail,
  #screen-moon.active>.rail{
    order:2!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    transform:none!important;
    border:0!important;
    border-top:1px solid var(--hm-line)!important;
    background:#fff!important;
  }
  #screen-korea.active.rail-collapsed>.rail,
  #screen-world.active.rail-collapsed>.rail,
  #screen-moon.active.rail-collapsed>.rail{
    flex:0 0 62px!important;
    height:62px!important;
    max-height:62px!important;
    overflow:hidden!important;
  }
  #screen-korea.active:not(.rail-collapsed)>.maparea,
  #screen-world.active:not(.rail-collapsed)>.maparea{
    flex:0 0 clamp(240px,36dvh,340px)!important;
    height:clamp(240px,36dvh,340px)!important;
    min-height:240px!important;
    max-height:340px!important;
  }
  #screen-korea.active:not(.rail-collapsed)>.rail,
  #screen-world.active:not(.rail-collapsed)>.rail{
    flex:1 1 auto!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  #screen-korea .rail-inner,
  #screen-world .rail-inner,
  #screen-moon .rail-inner{
    height:calc(100% - 28px)!important;
    max-height:none!important;
    padding:12px 14px calc(24px + env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #screen-korea .layer-grid,
  #screen-world .layer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  #screen-korea .layer-grid button,
  #screen-world .layer-grid button{
    min-height:44px!important;
    border-radius:10px!important;
  }

  /* ---------- MOON ---------- */
  #screen-moon.active>.moon-stage{
    order:1!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }
  #screen-moon.active:not(.rail-collapsed)>.moon-stage{
    flex:0 0 clamp(290px,40dvh,400px)!important;
    height:clamp(290px,40dvh,400px)!important;
  }
  #screen-moon.active:not(.rail-collapsed)>.rail{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  #screen-moon .metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #screen-moon .moon-copy{
    bottom:24px!important;
    padding:0 16px!important;
  }
  #screen-moon .moon-copy strong{
    font-size:26px!important;
  }

  /* ---------- DETAIL ---------- */
  #screen-detail.active{
    display:block!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #screen-detail.active>.rail{
    display:none!important;
  }
  #screen-detail.active>.detail-weather{
    display:block!important;
    width:100%!important;
    max-width:760px!important;
    min-height:100%!important;
    height:auto!important;
    margin:0 auto!important;
    padding:14px 12px calc(30px + env(safe-area-inset-bottom))!important;
    background:var(--hm-bg)!important;
    overflow:visible!important;
  }
  #screen-detail .detail-head{
    margin:0 0 12px!important;
    padding:3px 1px!important;
    align-items:center!important;
  }
  #screen-detail .detail-head h2{
    font-size:24px!important;
    line-height:1.25!important;
  }
  #screen-detail .detail-head p{
    font-size:11px!important;
    line-height:1.45!important;
  }
  #screen-detail .detail-now strong{
    font-size:38px!important;
  }
  #screen-detail .weather-panel,
  #screen-detail .info-block{
    margin:0 0 12px!important;
    padding:14px 13px!important;
    border:1px solid var(--hm-line)!important;
    border-radius:var(--hm-radius-md)!important;
    background:#fff!important;
    box-shadow:var(--hm-shadow)!important;
  }
  #screen-detail .weather-panel h3,
  #screen-detail .info-block h3{
    margin-bottom:10px!important;
    font-size:15px!important;
  }
  #screen-detail .detail-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  #screen-detail .hourly{
    gap:8px!important;
    padding-bottom:8px!important;
  }
  #screen-detail .hm-hour{
    min-width:126px!important;
    padding:11px 9px!important;
  }
  #screen-detail .detail-cards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  #screen-detail .detail-card{
    min-height:76px!important;
    padding:11px!important;
    border-radius:11px!important;
    box-shadow:none!important;
  }
  #screen-detail .hm-day{
    grid-template-columns:64px 34px minmax(0,1fr) auto!important;
    gap:6px!important;
    padding:10px 8px!important;
  }
  #screen-detail .provider{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:4px 10px!important;
  }
  #screen-detail .provider span{
    grid-column:1!important;
  }
  #screen-detail .provider strong{
    grid-column:2!important;
    grid-row:1/3!important;
    align-self:center!important;
  }
  #screen-detail .big-sun{
    height:96px!important;
  }

  /* ---------- COMPARE ---------- */
  #screen-compare.active{
    display:block!important;
    overflow:hidden!important;
  }
  #screen-compare.active>.rail{
    display:none!important;
  }
  #screen-compare.active>.maparea{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }
  #screen-compare #compareMap{
    flex:0 0 clamp(190px,30dvh,260px)!important;
    height:clamp(190px,30dvh,260px)!important;
    min-height:190px!important;
  }
  #screen-compare .compare-map-dock{
    position:relative!important;
    inset:auto!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    padding:10px 12px calc(18px + env(safe-area-inset-bottom))!important;
    border:0!important;
    border-top:1px solid var(--hm-line)!important;
    border-radius:0!important;
    background:var(--hm-bg)!important;
    box-shadow:none!important;
    overflow-y:auto!important;
    transform:none!important;
  }
  #screen-compare.dock-folded .compare-map-dock{
    flex:0 0 52px!important;
    height:52px!important;
    max-height:52px!important;
    overflow:hidden!important;
  }
  #screen-compare .compare-dock-head{
    gap:7px!important;
    flex-wrap:wrap!important;
  }
  #screen-compare .compare-dock-head strong{
    flex:1 0 100%!important;
    font-size:15px!important;
  }
  #screen-compare .compare-clear,
  #screen-compare .compare-map-toggle{
    min-height:40px!important;
  }
  #screen-compare .compare-quick{
    gap:6px!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  #screen-compare .compare-quick::-webkit-scrollbar{display:none!important}
  #screen-compare .compare-quick button{
    flex:0 0 auto!important;
    min-height:40px!important;
    white-space:nowrap!important;
  }
  #screen-compare .compare-dock-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  #screen-compare .compare-dock-card{
    border-radius:13px!important;
    box-shadow:var(--hm-shadow)!important;
  }
  #screen-compare .compare-dock-card>header{
    min-height:50px!important;
    padding:9px 10px!important;
    align-items:center!important;
  }
  #screen-compare .compare-dock-card h3{
    font-size:14px!important;
    -webkit-line-clamp:1!important;
  }
  #screen-compare .compare-categories{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #screen-compare .compare-categories>div{
    min-height:0!important;
    padding:9px 10px!important;
  }
}

/* narrow mobile: don't squeeze complex cards */
@media(max-width:390px){
  .top{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .nav button,
  .nav button.active{
    min-width:68px!important;
    padding:0 11px!important;
  }
  #mobileLocalDashboard .v8-weather-hero .point-current{
    grid-template-columns:74px auto minmax(78px,1fr)!important;
  }
  #mobileLocalDashboard .v8-weather-hero .point-weather-icon,
  #mobileLocalDashboard .v8-weather-art{
    width:74px!important;
    height:74px!important;
  }
  #mobileLocalDashboard #mldTempSlot #temp{
    font-size:50px!important;
  }
  #mobileLocalDashboard .v8-weather-hero .point-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #mobileLocalDashboard .v8-weather-hero .point-metrics>div{
    min-height:58px!important;
    border-right:1px solid #e4ebef!important;
    border-bottom:1px solid #e4ebef!important;
  }
  #mobileLocalDashboard .v8-weather-hero .point-metrics>div:nth-child(2n){
    border-right:0!important;
  }
  #mobileLocalDashboard .v8-weather-hero .point-metrics>div:nth-last-child(-n+2){
    border-bottom:0!important;
  }
  #mobileLocalDashboard .v8-astro-tide-grid{
    grid-template-columns:1fr!important;
  }
  #mobileLocalDashboard .v8-astro-tide-grid .mld-point-card{
    height:auto!important;
    min-height:188px!important;
    max-height:none!important;
  }
  #mobileLocalDashboard .mld-astro-card-section .sun-row{
    min-height:126px!important;
  }
  #mobileLocalDashboard .v8-tide-card .tide-events{
    min-height:126px!important;
  }
}

/* =========================================================
   DESKTOP
   ========================================================= */
@media(min-width:981px){
  :root{
    --studio-header:68px;
    --studio-nav:58px;
  }

  html,body,.app{
    background:#eef3f5!important;
  }

  .top{
    height:68px!important;
    min-height:68px!important;
    grid-template-columns:190px minmax(340px,680px) 1fr!important;
    gap:18px!important;
    padding:0 18px!important;
    background:#fff!important;
  }
  .search{height:44px!important}
  .ghost{min-height:40px!important}

  /* Desktop navigation: six balanced text tabs. */
  .nav{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    height:58px!important;
    padding:0 12px!important;
    gap:0!important;
    overflow:hidden!important;
  }
  .nav button,
  .nav button.active{
    width:100%!important;
    min-width:0!important;
    height:58px!important;
    min-height:58px!important;
    margin:0!important;
    padding:0 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-right:1px solid #edf1f3!important;
    border-radius:0!important;
    background:#fff!important;
    color:#39596c!important;
  }
  .nav button:last-child{border-right:0!important}
  .nav button strong{
    display:block!important;
    width:100%!important;
    font-size:14px!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
  .nav button.active{
    background:var(--hm-primary)!important;
    color:#fff!important;
  }

  .screen.active{
    height:calc(100dvh - var(--studio-header) - var(--studio-nav))!important;
    min-height:0!important;
    max-height:calc(100dvh - var(--studio-header) - var(--studio-nav))!important;
    overflow:hidden!important;
  }

  /* ---------- LOCAL desktop ---------- */
  #screen-local.active{
    display:grid!important;
    background:var(--hm-bg)!important;
  }
  #screen-local.active>.rail,
  #screen-local.active>.local-right-rail{
    height:100%!important;
    min-height:0!important;
    overflow-y:auto!important;
    background:var(--hm-panel-soft)!important;
  }
  #screen-local.active>.rail{
    position:relative!important;
    inset:auto!important;
    border-right:1px solid var(--hm-line)!important;
  }
  #screen-local.active>.maparea{
    height:100%!important;
    min-height:0!important;
    background:#e8eef2!important;
  }
  #screen-local.active>.local-right-rail{
    border-left:1px solid var(--hm-line)!important;
  }
  #screen-local .rail-inner{
    padding:17px 17px 28px!important;
  }
  #screen-local .local-right-inner{
    padding:18px 14px 26px!important;
  }
  #mobileLocalDashboard{
    width:100%!important;
    max-width:none!important;
  }
  #mobileLocalDashboard .v8-local-head{
    margin-bottom:10px!important;
    padding-bottom:10px!important;
  }
  #mobileLocalDashboard .v8-weather-hero{
    margin:0 0 11px!important;
    padding:15px!important;
    border:1px solid #d7e4ea!important;
    border-radius:17px!important;
    background:linear-gradient(145deg,#eef8ff,#fff 62%,#f5faf8)!important;
    box-shadow:var(--hm-shadow)!important;
  }
  #mobileLocalDashboard .v8-weather-hero .point-current{
    justify-content:flex-start!important;
    margin-bottom:12px!important;
  }
  #mobileLocalDashboard .v8-weather-hero .point-metrics>div,
  #mobileLocalDashboard .mld-weather-source,
  #mobileLocalDashboard .mld-mood{
    text-align:left!important;
  }
  #mobileLocalDashboard .nowcast,
  #mobileLocalDashboard .mld-point-card,
  #mobileLocalDashboard .mld-secondary,
  #mobileLocalDashboard .v8-favorites,
  #mobileLocalDashboard .v8-local-rank{
    margin:0 0 11px!important;
    border:1px solid var(--hm-line)!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:var(--hm-shadow)!important;
  }
  #mobileLocalDashboard .v8-astro-tide-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    margin-bottom:11px!important;
  }
  #mobileLocalDashboard .v8-astro-tide-grid>div{
    margin:0!important;
  }
  #mobileLocalDashboard .v8-astro-tide-grid .mld-point-card{
    margin:0!important;
  }
  #mobileLocalDashboard .v8-quick-actions{
    display:none!important;
  }
  #screen-local .local-right-inner h2{
    margin:5px 0 4px!important;
    font-size:21px!important;
    color:var(--hm-ink)!important;
  }
  #screen-local .local-right-inner>.sub{
    margin-bottom:13px!important;
    color:var(--hm-muted)!important;
  }
  #screen-local .local-rank-tabs{
    position:sticky!important;
    top:0!important;
    z-index:4!important;
    padding:6px 0 8px!important;
    background:var(--hm-panel-soft)!important;
  }
  #screen-local .ranking .rank{
    border:1px solid #e0e8ed!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  #screen-local .map-title{
    top:14px!important;
    left:14px!important;
  }

  /* ---------- LIVE / MOON / DETAIL ---------- */
  #screen-korea.active,
  #screen-world.active,
  #screen-moon.active,
  #screen-detail.active{
    display:grid!important;
    grid-template-columns:320px minmax(0,1fr)!important;
  }
  #screen-korea.active>.rail,
  #screen-world.active>.rail,
  #screen-moon.active>.rail,
  #screen-detail.active>.rail{
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    height:100%!important;
    max-height:none!important;
    overflow-y:auto!important;
    transform:none!important;
    border:0!important;
    border-right:1px solid var(--hm-line)!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:var(--hm-panel-soft)!important;
  }
  #screen-korea .rail-inner,
  #screen-world .rail-inner,
  #screen-moon .rail-inner,
  #screen-detail .rail-inner{
    padding:19px 17px 28px!important;
  }
  #screen-korea.active>.maparea,
  #screen-world.active>.maparea,
  #screen-moon.active>.moon-stage,
  #screen-detail.active>.detail-weather{
    height:100%!important;
    min-height:0!important;
  }

  /* Detail: readable content width, not stretched edge-to-edge. */
  #screen-detail.active>.detail-weather{
    overflow-y:auto!important;
    padding:24px 26px 38px!important;
    background:var(--hm-bg)!important;
  }
  #screen-detail .detail-head,
  #screen-detail .detail-weather>.weather-panel,
  #screen-detail .detail-grid{
    width:100%!important;
    max-width:1360px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  #screen-detail .detail-head{
    margin-bottom:16px!important;
  }
  #screen-detail .weather-panel,
  #screen-detail .info-block{
    border:1px solid var(--hm-line)!important;
    border-radius:15px!important;
    box-shadow:var(--hm-shadow)!important;
  }
  #screen-detail .detail-grid{
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)!important;
    gap:14px!important;
  }
  #screen-detail .detail-cards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  #screen-detail .hm-hour{
    min-width:138px!important;
  }

  /* Compare: map first, bounded card area below. */
  #screen-compare.active{
    display:block!important;
  }
  #screen-compare.active>.rail{
    display:none!important;
  }
  #screen-compare.active>.maparea{
    width:100%!important;
    height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  #screen-compare #compareMap{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:320px!important;
  }
  #screen-compare .compare-map-dock{
    position:relative!important;
    inset:auto!important;
    flex:0 0 auto!important;
    width:100%!important;
    max-height:44vh!important;
    padding:14px 18px 20px!important;
    border:0!important;
    border-top:1px solid var(--hm-line)!important;
    border-radius:0!important;
    background:#f6f9f8!important;
    box-shadow:none!important;
    overflow-y:auto!important;
    transform:none!important;
  }
  #screen-compare .compare-dock-grid{
    width:100%!important;
    max-width:1600px!important;
    margin:0 auto!important;
    display:grid!important;
    gap:10px!important;
  }
  #screen-compare .compare-dock-card{
    border-radius:13px!important;
    box-shadow:var(--hm-shadow)!important;
  }
}

/* compact desktop: map gets priority, TOP10 joins the left rail */
@media(min-width:981px) and (max-width:1279px){
  #screen-local.active{
    grid-template-columns:380px minmax(0,1fr)!important;
  }
  #screen-local.active>.local-right-rail{
    display:none!important;
  }
  #mobileLocalDashboard #mldRankMount{
    display:block!important;
  }
  #mobileLocalDashboard #mldRankMount .only-mobile{
    display:block!important;
  }
  #screen-detail.active,
  #screen-korea.active,
  #screen-world.active,
  #screen-moon.active{
    grid-template-columns:300px minmax(0,1fr)!important;
  }
  #screen-detail .detail-grid{
    grid-template-columns:1fr!important;
  }
  #screen-compare .compare-dock-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* standard desktop */
@media(min-width:1280px) and (max-width:1599px){
  #screen-local.active{
    grid-template-columns:420px minmax(0,1fr) 290px!important;
  }
  #mobileLocalDashboard #mldRankMount{
    display:none!important;
  }
  #screen-compare .compare-dock-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

/* wide desktop */
@media(min-width:1600px){
  #screen-local.active{
    grid-template-columns:460px minmax(0,1fr) 320px!important;
  }
  #mobileLocalDashboard #mldRankMount{
    display:none!important;
  }
  #screen-korea.active,
  #screen-world.active,
  #screen-moon.active,
  #screen-detail.active{
    grid-template-columns:340px minmax(0,1fr)!important;
  }
  #screen-compare .compare-dock-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
}