/* ========================================================================== 
   Desktop · > 1024px · Full Jarvis HUD
   ========================================================================== */
.mobile-only, .tablet-only, .mobile-tablet-only { display: none !important; }
.search-panel { top: calc(var(--safe-top) + 96px); left: max(18px, var(--safe-left)); width: clamp(285px, 22vw, 350px); padding: 16px; }
.weather-panel { top: calc(var(--safe-top) + 96px); right: max(18px, var(--safe-right)); width: clamp(300px, 23vw, 365px); max-height: calc(100dvh - 160px); overflow: auto; padding: 17px; }
.layers-panel { left: max(18px, var(--safe-left)); bottom: 56px; }
.globe-controls { left: 50%; transform: translateX(-50%); bottom: 50px; }
.globe-readout { top: calc(var(--safe-top) + 96px); left: 50%; transform: translateX(-50%); }
.legend { right: max(18px, var(--safe-right)); bottom: 56px; max-width: 420px; flex-wrap: wrap; justify-content: flex-end; }
.legend small { flex: 1 0 100%; padding: 5px 0 0; border-top: 1px solid rgba(111, 190, 218, .16); border-left: 0; line-height: 1.3; text-align: right; }

@media (max-width: 1270px) {
  .search-panel { width: 285px; }
  .weather-panel { width: 300px; }
  .globe-readout span { min-width: 70px; padding: 0 7px; }
  .legend small { display: none; }
}


/* Compact desktop HUD · prevents lower panels from colliding on narrow PC windows. */
@media (min-width: 1025px) and (max-width: 1365px) {
  :root { --header-h: 66px; }
  .topbar { top: max(7px, var(--safe-top)); left: max(7px, var(--safe-left)); right: max(7px, var(--safe-right)); height: 66px; padding-inline: 11px; gap: 9px; }
  .brand { gap: 8px; }
  .brand-orbit { width: 35px; height: 35px; }
  .brand-orbit span { left: 11px; top: 11px; }
  .brand-copy strong { font-size: .76rem; }
  .brand-copy small { font-size: .56rem; }
  .status-pill { min-height: 30px; padding-inline: 8px; }
  .top-actions { gap: 5px; }
  .icon-button { min-width: 34px; height: 34px; }
  .button-label { display: none; }

  .search-panel, .weather-panel { top: calc(var(--safe-top) + 82px); }
  .search-panel { left: max(10px, var(--safe-left)); width: clamp(258px, 24vw, 292px); padding: 12px; }
  .weather-panel { right: max(10px, var(--safe-right)); width: clamp(282px, 27vw, 315px); padding: 13px; max-height: calc(100dvh - 146px); }
  .quick-cities button:nth-last-child(-n+2) { display: none; }
  .privacy-note { display: none; }

  /* The full layer panel is replaced by the drawer button in the center controls. */
  .layers-panel { display: none !important; }
  #toggle-layers-mobile.mobile-tablet-only { display: grid !important; }
  #layer-drawer.mobile-tablet-only:not([hidden]) { display: block !important; }
  .layer-drawer { z-index: 40; left: max(10px, var(--safe-left)); bottom: 110px; width: 246px; padding: 12px; background: rgba(3, 14, 24, .96); }
  .drawer-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid rgba(101, 194, 225, .16); }
  .drawer-heading b { font-size: .73rem; }
  .drawer-heading button { width: 30px; height: 30px; border: 1px solid rgba(255, 100, 120, .25); border-radius: 50%; background: rgba(84, 13, 25, .28); color: #ff9ba7; cursor: pointer; }
  .layer-drawer label { display: flex; align-items: center; gap: 9px; padding: 7px 2px; color: var(--muted); font-size: .68rem; }
  .layer-drawer input { accent-color: #48c9ef; }
  .drawer-legal { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(101, 194, 225, .12); }
  .drawer-legal a { color: var(--faint); font-size: .55rem; text-decoration: none; }

  .globe-controls { bottom: 47px; max-width: calc(100% - 340px); }
  .globe-controls button { min-width: 48px; }
  .legend { right: max(10px, var(--safe-right)); bottom: 49px; gap: 8px; max-width: 310px; }
  .legend small { display: none; }
  .globe-readout { top: calc(var(--safe-top) + 82px); }
  .globe-readout span { min-width: 66px; padding-inline: 6px; }
  .scan-card { bottom: 108px; }
}

@media (min-width: 1025px) and (max-width: 1140px) {
  .status-pill:nth-child(3), .status-pill:nth-child(4) { display: none; }
  .globe-readout { display: none !important; }
  .legend span { font-size: 0; gap: 0; }
  .legend-dot { width: 9px; height: 9px; }
  .legend { gap: 10px; padding-inline: 11px; }
  .globe-controls { max-width: calc(100% - 180px); }
}



/* Short desktop viewports (browser bars, laptop panels): use the drawer instead
   of allowing the search and layer panels to stack into each other. */
@media (min-width: 1025px) and (max-height: 760px) {
  .search-panel, .weather-panel { top: calc(var(--safe-top) + 82px); }
  .search-panel { padding: 12px; }
  .weather-panel { padding: 13px; max-height: calc(100dvh - 190px); }
  .quick-cities, .privacy-note { display: none; }

  .layers-panel { display: none !important; }
  #toggle-layers-mobile.mobile-tablet-only { display: grid !important; }
  #layer-drawer.mobile-tablet-only:not([hidden]) { display: block !important; }
  .layer-drawer { z-index: 40; left: max(10px, var(--safe-left)); bottom: 110px; width: 246px; padding: 12px; background: rgba(3, 14, 24, .96); }
  .drawer-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid rgba(101, 194, 225, .16); }
  .drawer-heading b { font-size: .73rem; }
  .drawer-heading button { width: 30px; height: 30px; border: 1px solid rgba(255, 100, 120, .25); border-radius: 50%; background: rgba(84, 13, 25, .28); color: #ff9ba7; cursor: pointer; }
  .layer-drawer label { display: flex; align-items: center; gap: 9px; padding: 7px 2px; color: var(--muted); font-size: .68rem; }
  .layer-drawer input { accent-color: #48c9ef; }
  .drawer-legal { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(101, 194, 225, .12); }
  .drawer-legal a { color: var(--faint); font-size: .55rem; text-decoration: none; }

  .legend { width: auto; max-width: none; gap: 10px; padding-inline: 11px; }
  .legend span { font-size: 0; gap: 0; }
  .legend-dot { width: 9px; height: 9px; }
  .legend small { display: none; }
  .globe-controls { bottom: 47px; }
  .scan-card { bottom: 108px; }
}

@media (min-width: 1025px) and (max-height: 640px) {
  .globe-readout { display: none !important; }
  .weather-panel .forecast-block { display: none; }
  .weather-primary { margin-block: 8px; }
  .metric-grid article { min-height: 54px; }
}

@media (min-width: 1366px) and (max-width: 1599px) {
  .legend { max-width: 390px; }
}

@media (min-width: 1600px) {
  :root { --header-h: 78px; }
  .search-panel, .weather-panel { top: calc(var(--safe-top) + 104px); }
  .search-panel { width: 370px; }
  .weather-panel { width: 395px; }
  .weather-primary { margin-block: 17px; }
  .metric-grid article { min-height: 70px; }
}

.scan-card { bottom: 116px; }